reactjs中配置代理跨域

Posted ldlx-mars

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了reactjs中配置代理跨域相关的知识,希望对你有一定的参考价值。

第一步,下载依赖 http-proxy-middleware

yarn add http-proxy-middleware

第二步,在src下建立setupProxy.js

const proxy = require(‘http-proxy-middleware‘)

module.exports = function(app) 
  app.use(proxy(‘/api‘,  
       target: "https://h5api.zhefengle.cn",
       secure: false,
       changeOrigin: true,
       pathRewrite: 
        "^/api": "/"
       ,
    )
  );
;

注意:https://h5api.zhefengle.cn 这个是一个开源的接口,开源加入项目直接测试

第三步,在数据请求中直接请求,在真实url后添加/api即可,eg

const login=()=>
    return Api("/api/index/index_tab.html?",‘GET‘)

亲测有效

技术图片

 

以上是关于reactjs中配置代理跨域的主要内容,如果未能解决你的问题,请参考以下文章

reactjs中的跨域读取阻塞错误

Reactjs之Axiosfetch-jsonp获取后台数据

如何使用代理与 reactjs 建立链接

GatsbyJS/ReactJS 没有正确代理请求

无法将来自 localhost:3000 的请求代理到 localhost:7000 ReactJs

ReactJS/Next.js:CRA 代理不适用于 Next.js(尝试将 API 请求路由到 Express 服务器)