概要

我们通常会遇到跨域的问题，那么react18遇到跨域的时候，应该怎么样子去解决呢？当然我们会想到让服务器去解决跨域也是一种方法，那么前端也可以解决跨域的问题，在React 18中，跨域问题通常是由于CORS（跨源资源共享）策略导致的。如果你在开发过程中遇到跨域问题，可以通过以下方法解决：

方法一：使用代理服务器

你可以配置一个代理服务器（如webpack-dev-server），它会转发请求到目标服务器，从而绕过浏览器的同源策略。

若为webpack项目可以下载

1、npm install http-proxy-middleware

2、在src目录下创建setupProxy.js文件

//1、高版本需要使用proxy的createProxyMiddleware来进行配置
 
const {createProxyMiddleware} = require('http-proxy-middleware')    //解构出createProxyMiddleware
 
module.exports = function(app) {
    app.use(
        createProxyMiddleware('/api',{        //使用createProxyMiddleware
            target:'https://xcx.jiazhuangpei.com/',
            changeOrigin:true,
            pathRewrite:{'^/api':''}
        })
    )
}

若为vite项目可以下载

1、npm install http-proxy-middleware

2、在vite.config.ts文件中配置跨域

export default defineConfig({
    server: {
    host: '0.0.0.0',//使用当前的IP地址，没有这个就是以localhost作为本地地址
    port: 3001, //端口号为3000
    open: false, //是否在默认浏览器中自动打开该地址
    proxy: { //使用代理
      '/api': { //当有 /api开头的地址是，代理到target地址
        target: 'https://txcx.yididid.com', // 需要跨域代理的本地路径
        changeOrigin: true, //是否改变请求源头
        rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
      }
    }
  }
    
})

此时/api链接将所有转换成https://txcx.yididid.com去解决跨域问题

方法二：修改服务器配置

如果你有权访问后端服务器，可以在服务器上设置CORS头部允许特定的源访问资源。

1、在package.json中，你可以添加一个proxy字段来配置开发环境下的代理：

{
  "proxy": "http://localhost:3000"
}

这样，所有到http://localhost:<frontend_port>/的请求都会被代理到http://localhost:3000/。

如果你使用的是自定义的服务器或者框架，你需要在服务器端设置CORS头部。以Express为例：

const express = require('express');
const cors = require('cors');
 
const app = express();
 
// 允许跨域请求
app.use(cors());
 
// ...其他配置和路由
 
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

tips：确保只在开发环境中使用代理服务器，在生产环境中应该在服务器端设置CORS。

小结

喜欢的小伙伴可以点下收藏，一起来学习吧！