7. 跨域及解决方案

什么是跨域

同源策略

说到跨域就要先了解什么是同源策略。同源策略是一种安全策略，它会阻止一个域的JS脚本与另一个域的内容进行交互。

跨域

当一个接口地址的协议、域名、端口号三者之一与当前页面不同即为跨域。

当前页面URL	被请求URL	是否跨域	原因
http://www.tjfy.gov.com	http://www.tjfy.gov.com/home.html	否	协议域名端口一致
https://www.tjfy.gov.com	http://www.tjfy.gov.com/home.html	是	协议不一致
http://www.csfy.gov.com	http://www.tjfy.gov.com/home.html	是	主域名不一致
http://www.oauth.tjfy.gov.com	http://www.tjfy.gov.com/home.html	是	子域名不一致
http://www.tjfy.gov.com	http://www.tjfy.gov.com/home.html	否	协议域名端口一致

跨域是浏览器正常发起请求，服务端正常处理请求，但是浏览器拒绝接受跨域服务器返回的数据

解决方案

JSONP

优缺点

优点： 简单适用、兼容性好（低版本IE） 缺点： 只支持GET请求，不支持POST请求

核心思路及实现

添加一个<script>标签（script标签没有跨域限制！z）

  <script src='http://www.api.tjfy.gov.com/user/search?name=高&callback=detailSearch'></script>

  <script>
    function detailSearch(res) {
      console.log(res.data)
    }
  </script>

CORS

整个CORS通信过程都是由浏览器自动完成，不需要用户参与。对于开发者来说也不需要做额外的代码改动，CORS通信依赖服务端，只要服务器实现了CORS接口，就可以跨源通信。

优缺点

优点： 支持各种HTTP METHOD（get、post、put、delete...） 缺点： 兼容性不如JSONP(需要IE10以上浏览器和服务端支持)

实现

服务端添加Access-Control-Allow-Origin响应头，并指明可以共享数据的域

WebPack代理（proxy反向代理）

基本行为就是接收客户端发送的请求后转发给其他服务器。需要一个中间服务器（webpack-dev-server）

原理

通过http-proxy-middleware中间件,实现请求转发给其他服务器。在开发阶段，本地地址为http://localhost:8000,该浏览器发送一个前缀带有/api标识的请求到服务端获取数据，但响应这个请求的服务器只是将请求转发到另一台服务器中

onst express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

实现

在（vue/vite）.config.js或webpack.config.js中配置

  devServer: {
    proxy: {
      '/api': {
        target: 'http://ap.tjfy.gov.com'
        
        ,
        changeOrigin: true,
        pathRewrite: {'^/api': ''}
      }
    }
  }

Nginx反向代理

跨文档通信API

window.postMessage()

设置浏览器为可跨域

Google Chrome浏览器 属性 - 目标加上--disable-web-security --user-data-dir=C:\MyChromeDevUserData，–user-data-dir