React配置了跨域后导致页面跑不起来，无法访问此网站

React项目中，配置了setupProxy.js后，导致页面提示无法访问此网站

配置是这样配置的

const proxy  = require('http-proxy-middleware')module.exports = function (app) {app.use(proxy ('/api', { target: 'http://localhost:8080', changeOrigin: true,pathRewrite: { '^/api1': '' } }))
}

这里有一个坑，以为我用的是webstorm有提示功能，然后我就点击了安装

然后发现在package.jsonl里面就多了一个这个东西："http-proxy-middleware": "^2.0.6",

先执行npm uninstall http-proxy-middleware，把它卸载

然后你会发现还是跑不起来

后面了解到是http-proxy-middleware的版本有所不同，导致不能使用上面的那种方法

可以使用这种形式

const { createProxyMiddleware } = require('http-proxy-middleware')    //现在的
// const proxy = require("http-proxy-middleware");        //原来的module.exports = function (app) {app.use(createProxyMiddleware('/api', {      //这里也要改成createProxyMiddlewaretarget: 'http://localhost:8080',changeOrigin: true,pathRewrite: { '^/api': '' },}))}

然后重新执行yarn start重新运行起来就可以了

记住，一定要重新运行，否则将不会生效

React配置了跨域后导致页面跑不起来，无法访问此网站相关推荐

Nginx配置cros跨域以及遇到401响应的问题
nginx配置cros跨域以及遇到401.500响应的问题这是我Nginx的server配置: server {listen 80;server_name DataAnalysis;location ...
vue配置解决跨域问题
我们在使用vue时,经常要遇到跨域的问题,其实这个问题很好解决,只需我们在vue-cli中配置一下即可. 实现跨越请求: 在config文件夹下找到index.js proxyTable: {&quo ...
通过 Nginx 代理转发配置实现跨域（API 代理转发）
通过 Nginx 代理转发配置实现跨域(API 代理转发) 阅读 2285 收藏 119 2017-04-08 原文链接:www.thinktxt.com 1元视频体验视频通话10000分钟cloud ...
python flask跨域_Flask配置Cors跨域的实现
1 跨域的理解跨域是指:浏览器A从服务器B获取的静态资源,包括Html.Css.Js,然后在Js中通过Ajax访问C服务器的静态资源或请求.即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源 ...
关于vue-cli3中配置请求跨域的问题
关于vue-cli3中配置请求跨域的问题根据Vue CLI3官方文档, 需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题. 1.关于vue.config.j ...
react+spring 记录跨域问题的解决方法
react+spring 记录跨域问题的解决方法参考文章: (1)react+spring 记录跨域问题的解决方法 (2)https://www.cnblogs.com/cq-jiang/p/954 ...
随笔-springBoot配置全局跨域
随笔-springBoot配置全局跨域本文参考链接: 前端看视频学习vue使用axios进行Ajax请求,视频中使用nodemon创建的node-server,弄了半天一直说跨域.为了不浪费时间直接 ...
Chrome 配置允许跨域访问
跨域是浏览器为了更加安全,使用同源策略控制网站不能执行其他网站的脚本. 解决跨域问题一般可以通过几个方式改变: 在服务端配置允许跨域(CORS): jsonp 访问方式: 开发.安装浏览器扩展: 取消 ...
Flask + Nginx + React + Webpack 配置解决跨域问题
用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...

React配置了跨域后导致页面跑不起来，无法访问此网站

React配置了跨域后导致页面跑不起来，无法访问此网站相关推荐

最新文章

热门文章