解决跨域问题的五种方法

为什么会出现跨域问题

浏览器的同源策略是跨域问题的根本所在。同源策略是一个非常重要的安全策略，它用于限制两个源之间在浏览器上进行资源交互。如果缺少了同源策略，网站或服务器很容易受到 XSS、CSFR 等攻击。

那么同源是什么意思？同源表示两个 URL 的 origin 是相同的，origin 由 protocol、host 和 port 组成。

{
  "protocol": "http:",
  "host": "web.example.com",
  "port": "",
  "origin": "http://web.example.com"
}

以下方法假设：

前端域名：http://web.domain.com

后端域名：http://server.domain.com

运行在 http://web.domain.com 的 JavaScript 代码发起了一个到 http://server.domain.com/api/list 的 AJAX 请求。

方法一：设置 CORS 允许跨域资源共享（最直接）

设置 CORS 是最直接的方法。该方法无需前端操作，只需后端在返回响应时设置响应头即可：

指定允许访问的域名：

{
  "Access-Control-Allow-Origin": "http://web.domain.com"
}

或者使用通配符 * ，表示所有网站都可以访问资源：

{
  "Access-Control-Allow-Origin": "*"
}

方法二：使用 Nginx 反向代理（最兼容）

由于同源策略仅存在于浏览器之间，服务器之间的交互不需要遵循同源策略。

所以我们这里可以使用 Nginx 作为 Web 服务器，监听并接收来自外部（其他服务器）请求，将接收到的请求使用和本机相同的域名转发到后端，然后再将响应转发给前端。

使用 Nginx 反向代理的必要设置如下：

// nginx.conf
server {
  listen 80;
  server_name web.domain.com;
  location / {
    proxy_pass server.domain.com;
  }
}

修改后需要重启 Nginx 服务器：

sudo nginx -s reload

方法三：前端使用 Webpack 代理（最方便）

同样也是利用服务器向服务器请求无需遵循同源策略的特点。只不过这里我们使用 Webpack 作为本地的代理服务器。

该方法无需后端操作，只需在 webpack.config.js 中配置即可：

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      // 接口前缀
      '/api': {
        target: 'http://server.domain.com', // 指定服务器地址
      },
    },
  },
}

方法四：使用 JSONP（最古老）

JSONP（JSON with Padding）主要是利用