前端跨域问题

前端请求跨域

在开发过程中，我们经常遇到请求跨域问题。 跨域问题是由于浏览器的同源策略导致的。同源策略是一种约定，它是浏览器的一种安全功能，阻止某些来自不同源的“document”或脚本等之间的交互，例如钓鱼网站等问题。

哪些会跨域

所谓的“源”是指“协议 + 域名 + 端口”。 所以，源不同，就会产生跨域问题。

例如，当你尝试从一个源的网页去请求另一个源的资源时，就会发生跨域问题。例如，你的网页在 http://localhost:3000 上运行，而你试图从 http://api.example.com 获取数据，这就是一个跨域请求。这里要注意的是，协议是经常被忽略的一点。若请求地址为http://localhost:3000，即使域名和端口一致，仅协议不同，也会跨域。

常用解决思路

解决跨域问题的常见方法有：

1. CORS（跨源资源共享） ：这是最常用的解决跨域问题的方法。服务器设置相应的头部信息，允许来自不同源的请求。
2. JSONP（JSON with Padding） ：这是一种旧的解决跨域问题的方法，它利用 <script> 标签的 src 属性没有跨域限制的特性来发送请求。但是，JSONP 只能发送 GET 请求。
3. 代理服务器：在客户端和服务器之间设置一个代理服务器，让代理服务器去请求数据，然后返回给客户端。这样，客户端就可以绕过同源策略的限制。
4. WebSockets：WebSockets 不受同源策略的限制，所以可以用来进行跨域通信。
5. PostMessage：HTML5 引入的一种新的通信方式，可以实现跨域通信。

实际案例

后端方案

实际开发过程中，一般采用第一种方式。以express后端为例：

创建一个express应用实例
const app = express ();

//配置cors中间件，这里是一个基本的全开放配置示例
app.use (cors ());

再次访问，发现接口header设置允许源成功

前端方案

如果你不能修改后端代码，或者你的后端不支持 CORS，那么你可以在你的前端项目中设置一个代理。在你的 package.json 文件中（或vite.config等），你可以添加一个 proxy 字段，将其值设置为你的 API 服务器的地址：

{
  "name": "my-app",
  "version": "0.1.0",
  "proxy": "http://120.26.xxx.xxx:4000",
  // ...
}

并且配置允许跨域：

{
    cors:true,
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
}

然后，你可以在你的前端代码中使用相对路径来请求 API，例如 /api/users。Create React App 会将这些请求代理到你在 proxy 字段中设置的地址。

请注意，这个代理只在开发环境中有效，不会影响生产环境。