关于浏览器跨域问题解决方案

刚开始接触前后台开发,前端使用HTML+CSS+JS,后台使用的C# API。今天遇到跨域问题,尝试了一天终于解决了。

先简单说下跨域问题,首先网络域和浏览器有同源策略(cros),即.协议相同,域名相同,端口相同,这个同源策略也是浏览器防止各种网络攻击的手段,三者同时成立才能叫同源,三者其一不同源,比如从一个域名的网页去请求另一个域名的资源,那么跨域问题就出现了。

我将后台代码发布在IIS上,但是当外部谷歌浏览器访问时,出现跨域相关报错,当然为了测试,可以先给谷歌浏览器配置以下属性。

 --disable-web-security --user-data-dir

但是以后呢,总不能给每个用户都配置这个属性吧。况且,我又发现了火狐也存在着跨域问题,数据不能正常加载。而且浏览器们关于跨域问题的报错五花八门:
比如,jquery-3.3.1.js:9600 Failed to load ×××××××× Response for preflight does not have HTTP ok status;
比如,Failed to load resource: the server responded with a status of 405 (Method Not Allowed); 比如,请求的资源不支持 http 方法“OPTIONS”;再比如,已拦截跨源请求:同源策略禁止读取位于 http://××××××××的远程资源。(原因:CORS 预检通道未成功)......

所以如果遇到跨域问题,接下来对后台服务器代码的设置就可以做以下尝试了。

首先:在web.config中配置

 <httpProtocol>
    <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
       <add name="Access-Control-Allow-Headers" value="Content-Type" />
       <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
</httpProtocol>

如果还不能解决跨域,那么继续尝试下面这个我认为非常重要并且我在网上没有查到的操作:

  1. 导入System.Web.Http.Cors.dll 和 System.Web.Cors.dll 包。两包相互关联,缺一不可,注意这两个包的版本要和自己后台工程中的其他包版本匹配,不然还是会报错。
  2. 在Global.asax中引入using System.Web.Http.Cors;,再在Application_Start()方法中添加如下代码
  3.  //定义HTTP配置对象
        HttpConfiguration config = new HttpConfiguration();
      //跨域
        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);
  4. 最后重新编译发布。

尝试了两种方案之后,跨域问题解决,在谷歌、火狐、Microsoft edge测试,前后台成功交互。

寻找解决方案的过程比较艰辛,我总结出来,希望大家能有更好的解决方法分享。有问题欢迎指正。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值