No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

时间:2024-04-09 16:58:54

创建一个.net的webapi程序,在项目文件夹下创建一个index.html页面,用来请求webapi接口,代码如下:

webapi代码:

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

 

index代码:

 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

 

在浏览器中可以看到请求成功,并返回了hello

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

 这时候如果在webapi项目文件夹外创建一个新的页面,home.html页面,同样发送ajax请求,请求webapi,代码如下:

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

这时候浏览器就报错,发生了跨域请求。这是浏览器的安全机制,默认不允许程序访问其他服务器中的资源。 

这仅仅是浏览器将请求拦截了,如果使用工具模拟发送请求,是可以正常访问api接口的:

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

 如果要使用浏览器来访问api接口,跨域问题也是可以解决的,解决方法是在api程序中引用包Microsoft.AspNet.WebApi.Cors

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

在NuGet中安装这个包,然后在项目的WebApiConfig.cs文件中添加配置信息,允许跨域请求。

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

还需要在控制器中添加被允许跨域访问的网站和方法:

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

这里的星号(*)表示所有方法都可以跨域请求。

配置信息添加完成后,启动项目,刷新home.html页面,请求webapi,这时候浏览器就不再报跨域错误了。接口调用成功并返回结果:

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题解决

总结下,解决webapi浏览器访问跨域问题,需要三步:

1.安装程序包:Microsoft.AspNet.WebApi.Cors。

2.在项目文件WebApiConfig.cs中添加配置信息,允许项目被跨域请求。

3.在具体的控制器(Controller)中配置信息,允许控制器的哪些方法可以被跨域请求。