react解决跨域的两种方式

Mzp风可名喜欢

已于 2023-09-22 10:09:12 修改

阅读量1.4k

点赞数

文章标签： react.js javascript 前端

于 2023-09-22 09:45:55 首次发布

本文链接：https://blog.youkuaiyun.com/mzp520lf/article/details/133157006

版权

本文介绍了同源策略的概念，指出其限制了不同源间的资源访问。通过配置HTTP代理服务器，如使用`http-proxy-middleware`，可以解决跨域问题，包括配置多个代理、改变请求头中的Host字段以及路径重写，以确保请求正确转发到目标服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每当我们发送请求违背同源策略的时候，我们就会报下面的错误，这就是跨域导致的报错。

什么是同源策略？

同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同，只要域名，协议，端口有一项不相同就是不同源。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。

如何解决跨域？

我们可以通过配置代理服务器的方式来解决跨域，如图所示

1、在package.json中通过配置proxy

 "proxy":"http://localhost:5000"

但这样写是有缺点的：1、这样写只能配置一个代理服务器，如果此时我要向5001端口发请求还是会跨域。2、这样写还会出现一个问题，如何我们发http://localhost:3000/index.html它会自己在我们的本地文件里拿而不会去5000端口拿数据。

优点：配置简单，前端清求资源时可以不加任何前缀。

const {createProxyMiddleware}=require('http-proxy-middleware')
module.exports=function(app){
    app.use(
        createProxyMiddleware('/api1',{//api1是需要转发的请求（所有带有/api1前缀的请求都会转发给5000）
            target:'http://localhost:5000',//配置转发目标地址（能返回数据的服务器地址）
            changeOrigin:true,//控制服务器收到的请求头中Host字段的值
            /*
            changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
            changeOrigin设置为false时，服务器收到的请求头中的host为：1oca1host:3000
            changeOrigin黑默认值为false,但我们一般将changeOrigin值设为true
            */
            pathRewrite:{'^/api1':''}//去除请求前缀，保证交给后台服务器的是正常请求地址（必须配置）
        }),
        createProxyMiddleware('/api2',{//api2是需要转发的请求（所有带有/api1前缀的请求都会转发给5001）
            target:'http://localhost:5001',//配置转发目标地址（能返回数据的服务器地址）
            changeOrigin:true,//控制服务器收到的请求头中Host字段的值
             /*
            changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
            changeOrigin设置为false时，服务器收到的请求头中的host为：1oca1host:3000
            changeOrigin黑默认值为false,但我们一般将changeOrigin值设为true
            */
            pathRewrite:{'^/api2':''}//去除请求前缀，保证交给后台服务器的是正常请求地址（必须配置）
        })
    )
}

2、在src下写一个setupProxy.js，在这个JS文件中配置代理

推荐使用这种方式，因为它既可以避免上一种方法只能配置一种代理的局限又可以有效的防止在自己的本地拿数据，只要我们加的前缀是我们本地文件里没有的它就不会去我们的本地文件里拿。

但这种方法需要注意的是：在发请求的时候一定不要忘记加前缀。