跨域理解及常用解决方案

什么是跨域?

浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。
跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。
这是由于浏览器的同源策略而导致的,同源策略限制了不同源之间的资源进行交互,用于隔离潜在的恶意文件的安全机制,并且是浏览器最基本的安全机制。

以 https://www.cnblogs.com/liangshibo/p/12275129.html 为例:域名是指"//"和"/"之间的全部内容,也就是"www.cnblogs.com",当我们从另一个域名的js中获取该域名下的资源时,就会产生跨域。
当然,如果你直接在地址栏里获取资源,是不会产生跨域的,这也就是为什么有的后台接口在地址栏里打开没问题,用ajax获取就报错的原因。

常见的跨域场景有哪些?

1、同一域名,不同端口。http://www.demo.com:8000/a.js && http://www.demo.com/b.js
2、同一域名,不同协议。http://www.demo.com:8000/a.js && https://www.demo.com/b.js
3、域名和域名对应相同 IP。http://localhost:8000/a.js && http://127.0.0.1:8000/b.js

如何解决跨域?

1、jsonp,是json的一种使用模式,仅支持get方式,这里就不写了,毕竟一搜一大堆,我应该也用不到

2、跨域资源共享(cors),在服务器端的webconfig设置允许跨域。以下是代码:

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
        <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

 

posted @ 2020-02-07 23:26  梁仕博  阅读(773)  评论(0编辑  收藏  举报