创建一个.net的webapi程序,在项目文件夹下创建一个index.html页面,用来请求webapi接口,代码如下:
webapi代码:
index代码:
在浏览器中可以看到请求成功,并返回了hello
这时候如果在webapi项目文件夹外创建一个新的页面,home.html页面,同样发送ajax请求,请求webapi,代码如下:
这时候浏览器就报错,发生了跨域请求。这是浏览器的安全机制,默认不允许程序访问其他服务器中的资源。
这仅仅是浏览器将请求拦截了,如果使用工具模拟发送请求,是可以正常访问api接口的:
如果要使用浏览器来访问api接口,跨域问题也是可以解决的,解决方法是在api程序中引用包Microsoft.AspNet.WebApi.Cors
在NuGet中安装这个包,然后在项目的WebApiConfig.cs文件中添加配置信息,允许跨域请求。
还需要在控制器中添加被允许跨域访问的网站和方法:
这里的星号(*)表示所有方法都可以跨域请求。
配置信息添加完成后,启动项目,刷新home.html页面,请求webapi,这时候浏览器就不再报跨域错误了。接口调用成功并返回结果:
总结下,解决webapi浏览器访问跨域问题,需要三步:
1.安装程序包:Microsoft.AspNet.WebApi.Cors。
2.在项目文件WebApiConfig.cs中添加配置信息,允许项目被跨域请求。
3.在具体的控制器(Controller)中配置信息,允许控制器的哪些方法可以被跨域请求。