航航笔记

跨域是什么？如何解决跨域问题？ ​

得分点 同源限制、协议、域名、端口、CORS、node中间件、JSONP、postmessage

跨域 ​

当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了。

跨域限制的原因 ​

浏览器为了保证网页的安全，出的同源协议策略。

跨域报错信息 ​

js
Access to XMLHttpRequest at 'http://127.0.0.1:3038/' from origin 'http://127.0.0.1:3039'127.0.0.1/:1has beenblocked by coRs policy: Response to preflight regquest doesn't pass access control check: No 'Access-control-Allow-Origin' header is present on the requested resource.

Error:
  Network Error
  at e.exports(isAxiosError.js:10)
  at XMLHttpRequest.l.onerror(isAxiosError.js:10)
  
Failed to load resource: net::ERR FAILED

跨域解决方案 ​

  • cors：目前最常用的一种解决办法，通过设置后端允许跨域实现。
js
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

  • node中间件、nginx反向代理：跨域限制的时候浏览器不能跨域访问服务器，node中间件和nginx反向代理，都是让请求发给代理服务器，静态页面面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。

  • JSONP：利用的原理是script标签可以跨域请求资源，将回调函数作为参数拼接在url中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript。

  • postmessage：H5新增API，通过发送和接收API实现跨域通信。