【跨域】如何解决跨域问题

同源策略

同源

相同协议+相同域名+相同端口

内容

• 浏览器的同源策略 - Web 安全 | MDN (mozilla.org)

浏览器页面向不同源的服务器发送ajax请求资源时，响应的数据会被浏览器拦截

意义

出于安全性的考虑，防止恶意获取数据

解决方案

JSONP

不使用ajax请求，替换为不受同源策略控制的script标签

缺点

• 只支持get

不常用

Node正向代理

利用服务端请求不会跨域的特性，让接口和当前站点同域。

浏览器页面的请求都发给同源的node代理服务器，根据请求内容的不同转发给不同的服务器，再转发给浏览器

eg Vue-cli 3.x

// vue.config.js 如果没有就新建
module.exports = {
  devServer: {
    port: 8000,
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  }
};

Nginx反向代理

浏览器页面的请求都发给同源的nginx代理服务器，根据请求内容的不同转发给不同的服务器，再转发给浏览器

server {
        listen 80;
        server_name local.test;
        location /api {
            proxy_pass http://localhost:8080;
        }
        location / {
            proxy_pass http://localhost:8000;
        }
}

缺点

• 不够灵活，前后端人员需要协商请求路径

CORS

后端添加浏览器页面ip的白名单，浏览器获取http响应头后，判断页面ip是否在白名单中，决定是否拦截响应数据
跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

springboot中的标签@CrossOrigin可以配置

websocket

没有了http头，就不受同源策略的限制

参考文章

• 解决跨域问题的几种方案 - 知乎 (zhihu.com)
• 10 种跨域解决方案（附终极方案） - 知乎 (zhihu.com)