React跨域配置

# React跨域配置

在实际的开发过程当中，因为采用前后端分离的开发模式，所以前端和后端在制定好数据接口以后就会并行开发，而在和后端进行联调的时候往往会出现跨域的问题

# 方式一、在package.json进行配置

直接在package.json当中进行如下的配置：

代码语言：javascript复制

"proxy": "http://localhost:8000"

然后你页面中的请求fetch('/api/xxxx/')就会转发到proxy中的地址

# 方式二、使用http-proxy-middleware

这是在实际开发当中最常用的一种前端跨域解决方案

• 首先在先http-proxy-middleware

代码语言：javascript复制

npm i http-proxy-middleware # yarn add http-proxy-middleware

• 在src目录下新建setupProxy.js

代码语言：javascript复制

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://xxxxx:xxxx',
      changeOrigin: true,
      pathRewrite: {
        "^/api": ""
      }
    })
  );
};

经过如下的配置后就能够在开发的时候进行跨域请求后端接口的数据

网络安全 http 网站 json javascript

0 人点赞