三分钟，解决前端跨域

为什么会跨域

一般情况下，当浏览器向不同 源(协议、IP、端口)的资源发出请求时，会报错误如下：

这就是 跨域 问题。

跨域是因为浏览器的同源策略所导致的。

什么是同源策略

浏览器出于安全的考虑做了同源策略的限制。源指的是协议、IP、端口。 协议、IP、端口 必须全都相同才是同源。

解决方案

1. JSONP

只支持 Get 请求，并且只能接收 json 格式的数据，还容易收到 XSS 攻击。不推荐。

<script>
    function handleResponse(res) {
      console.log(res);
    }

    var script = document.createElement('script');
    script.src = 'https://10.2.2.25/api?callback=handleResponse';
    document.head.appendChild(script);
</script>

其实就是动态创建一个 script 标签，并在标签里加入 callback 参数, 然后在回调函数里处理后端返回的数据。

2. CORS

官方推荐，后端处理，推荐。

CORS（Cross-Origin Resource Sharing）是一种官方推荐的跨域解决方案。它通过在服务器端设置响应头来允许跨域访问。具体而言，服务器在响应中添加 Access-Control-Allow-Origin 头，并设置允许访问的源地址。浏览器在收到这个响应头后，就会允许跨域访问并将响应数据返回给前端页面。CORS 支持各种类型的 HTTP 请求，包括 GET、POST 等，并且具有较好的安全性。

3. proxy

既然跨域是浏览器导致的，那我们绕开浏览器就行了。使用代理也是常用的解决跨域的方案。

请求的资源跨域，我们可以请求自己同源的服务(代理)，然后通过代理去请求跨域的资源。常用的解决方案一般是两种：

本地代理

开发环境，前端处理，推荐。

无论是 webpack 还是 vite 都内置了本地代理。这让我们能够在不依赖后端的前提下解决跨域的问题(仅仅是本地开发环境下, 线上环境需要 nginx 配置反向代理)

webpack 的处理方式如下(官方文档看这里):

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

vite 的处理方式(官方文档看这里):

export default defineConfig({
  // ...
  server: {
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

nginx 反向代理

生产环境，运维处理，推荐。

生产环境一般用 nginx 托管部署我们的前端代码包。处理跨域问题需要 nginx 配置反向代理。

server {
    listen: 8001;
    server_name 10.2.2.25;

    location ~ /api/ {
        proxy_pass http://127.0.0.1:8081;
    }
}

参考文档

Web 安全开篇：浏览器为什么会有同源策略？