一、什么是跨域问题？ 跨域问题通常出现在浏览器环境中。当你在一个域名下的网页中，尝试请求另一个不同域名（或端口、协议）的资源时，浏览器会默认阻止这种请求，除非目标服务器明确允许跨域。这种安全机制被称为“同源策略”（Same-Origin Policy）。
- 同源策略的定义 同源策略是一种浏览器安全机制，用于防止不同来源的网站之间的恶意交互。浏览器认为两个 URL 同源，必须满足以下三个条件：
协议相同（如 http 与 https 不同源） 域名相同 端口相同 如果以上任一条件不满足，则被认为是跨域访问，浏览器将默认阻止此类请求。
- CORS 机制 CORS 是跨域资源共享的简称，是一种通过 HTTP 头控制跨域访问的机制。它允许服务器声明哪些域可以访问服务器上的资源，以及允许使用哪些 HTTP 方法和头部。CORS 的主要作用是增强 Web 应用的安全性。
二、在 React 项目中遇到的跨域问题 在使用 React 进行开发时，通常会遇到以下跨域问题：
开发环境中，React 应用通过 http://localhost:3000 运行，而后端 API 可能在 http://localhost:5000 上运行，这种情况下会出现跨域请求。 当从 React 应用中向后端 API 发送请求时，如果没有正确配置 CORS，浏览器将阻止请求，并在控制台显示相关错误信息。 常见的跨域错误信息 当跨域请求被阻止时，浏览器的控制台通常会显示类似以下的错误信息：
方案一：
react简单解决跨域可以直接在 package.json 中添加 proxy 属性
方案二：
如果你已经进行了 npm run eject ，建议你直接修改 config>webpackDevServer.config.js
proxy: { '/api': { target: 'https://www.ahsj.link/rambo', // 后台服务地址以及端口号 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/' } } }
方案三（推荐）：
安装 http-proxy-middleware ：
yarn add http-proxy-middleware
这里注意，http-proxy-middleware 模块是有版本区别的，默认安装最新版本，然后在 src 目录下新建 setupProxy.js ：
const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "https://www.ahsj.link/rambo", changeOrigin: true, pathRewrite: { "/api": "", }, }) ); };
重新 npm run start 即可解决跨域了！
以上就是React跨域最快的解决方法！
