跨域问题的梳理

前两天面试问到了跨域问题，答得不是很好，所以总结一下跨域问题。

1.产生原因

由以下三个条件同时满足时，才会产生跨域问题。

• 浏览器限制

浏览器处于安全的考虑会对请求做校验，校验不通过就会报跨域的问题。

Access to XMLHttpRequest at 'XXX' from origin 'XXXX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• 跨域

请求的地址和本域的协议、域名、端口有一个不一致就为跨域。

• XHR(XMLHttpRequest)请求

发出去的请求为XHR请求。像图片、CSS、JS等请求不会产生跨域问题，就是因为他们的请求不是XHR格式的。

2.解决办法

• 禁止浏览器检查

chrome.exe–disable-web-security -user-data-dir=e:\forbidden-check

（-user-data-dir= e:\forbidden-check 表示浏览器禁止安全检查的临时存放数据目录）

不建议这样设置，而且也没法让所有用户都这样设置。

• 使用JSONP

JSONP是在客户端生成<script></script>标签，发送type为script格式的请求，这样就不会产生跨域问题。

不建议这样使用，因为要修改服务端代码。

• 修改被调用方的应用服务器（例如Tomcat）或者web服务器（例如Nginx、Apache）

在响应头中添加以下内容:

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER
Access-Control-Max-Age:3600
Access-Control-Allow-Credentials:true

不建议这样设置，因为需要修改被调用方的配置，如果就是想抓取别人网站上的数据，那就没法让被调用方修改。

• 调用方使用反向代理

请求本域的地址，然后通过反向代理请求别人的接口，这样可以解决跨域的问题。

在Nginx中通过proxy_pass 来反向代理请求别人的接口。

 

以上内容参考慕课网课程：https://www.imooc.com/video/16571