美文网首页
React接口跨域配置代理方法及遇到问题解决

React接口跨域配置代理方法及遇到问题解决

作者: momohi | 来源:发表于2022-10-12 10:47 被阅读0次
    浏览器3000端口调用5000端口服务器出现跨域

    方法一:设置package.json ----设置proxy为服务器地址,只能设置一个

    遇到问题:

    1、修改package.json文件后需重新启动项目

    2、项目启动后3000端口被占用,浏览器起3001端口,app.js却用localhost:3000调用则失败

    pagkage.json配置文件 App.js文件 启动后浏览器调用数据成功

    方法二、配置setupProxy.js文件---src文件夹下新创建setupProxy.js文件

    遇到问题:1.http-proxy-middleware引入方式不同,我这个是高版本引入方式如下图配置文件,低版本引入方式为 

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

    如引入方式错误,则启动项目浏览器打开页面为无法访问

    http-proxy-middleware引入方式错误是浏览器页面

    2.配置多个地址时,我从/api开始写 第一个地址配置为/api,第二个地址配置为/api1则只有第一个配置的/api能正确访问,第二个配置地址无法访问(不知道啥原因----貌似因为/api1包含/api所以碰到/api就被第一个配置解析了,地址匹配错误所以访问不到)

    setupProxy.js文件 App.js文件 配置完成后访问5000和5001端口返回数据

    相关文章

      网友评论

          本文标题:React接口跨域配置代理方法及遇到问题解决

          本文链接:https://www.haomeiwen.com/subject/rxcfzrtx.html