chrome升级导致本地开发跨域问题

前端

2024-02-02 14:29:38

本地开发中的跨域问题：原因与解决方案

在软件开发过程中，跨域问题是一个令开发者头疼的问题，特别是在本地开发环境中。本文将深入探讨跨域问题的成因，并提供两种有效的解决方案，帮助你解决这一难题。

什么是跨域问题？

跨域问题是指浏览器限制对不同源服务器资源的访问。源指的是一个域、协议和端口的组合。当一个网页试图访问另一个源上的资源时，浏览器会默认阻止该请求以防止恶意脚本的攻击。

跨域问题的成因

在本地开发中，跨域问题通常由以下原因引起：

API 服务器未设置 CORS 标头： CORS（跨源资源共享）是一组 HTTP 标头，允许不同源的浏览器请求进行通信。如果 API 服务器未设置适当的 CORS 标头，浏览器将阻止跨域请求。
浏览器默认配置： 大多数浏览器默认情况下会阻止跨域请求。这是一种安全措施，旨在防止恶意脚本访问来自不同源的敏感数据。

解决跨域问题

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

方案一：更改浏览器默认配置

这种方法适用于希望允许所有跨域请求的情况。在 Chrome 浏览器中，可以按照以下步骤更改默认配置：

1. 在 Chrome 地址栏中输入 chrome://flags。
2. 搜索 "SameSite by default cookies"。
3. 将其设置为 "Disabled"。
4. 重新启动 Chrome。

方案二：使用 CORS 代理

CORS 代理是一种中间服务器，位于本地服务器和 API 服务器之间。它会将请求转发到 API 服务器，并添加必要的 CORS 标头，允许本地域访问响应。

有许多可用的 CORS 代理，例如：

CORS Anywhere
CORS Proxy

按照代理提供商的说明配置代理，然后将本地服务器配置为使用代理。

代码示例

使用 CORS Anywhere 的代码示例：

本地服务器（Node.js）

const cors = require('cors');
const express = require('express');

const app = express();
app.use(cors({ origin: 'https://localhost:3000' }));
app.listen(8080);

客户端（React）

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:8080/api',
  withCredentials: true,
});

使用 CORS Proxy 的代码示例：

本地服务器（Node.js）

const proxy = require('cors-anywhere');

proxy.createServer({
  originWhitelist: ['https://localhost:3000'],
  requireHeaders: ['origin', 'x-requested-with'],
  removeHeaders: ['cookie', 'cookie2'],
}).listen(8080, '0.0.0.0');

客户端（React）

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://localhost:8080/https://api.example.com/api',
  withCredentials: true,
});