“proxy” in package.json must be a string 解决办法

今天学习一个react项目。想从本地服务器获取数据。

直接axios.get(‘http://localhost:80/api/react/header.json‘),报错跨域。

网上查了下,需要在package.json里配置下proxy。OK,照着大神的分享一步一步配置好了。却提示:

照字面意思来理解。。proxy必须是一个字符串,但是我配置的是对象。

方法1:那就按照字符串来配置。

使用:

需要注意的是,get方法里的url路径无需写本地服务器地址了,也就是说所有的请求都会走这里。。

我的是可以了。如果有错误,欢迎指出。

方法2:http-proxy-middleware 插件。

$ npm install http-proxy-middleware --save
$ 或
$ yarn add http-proxy-middleware

然后在src目录下创建一个setupProxy.js文件。内容如下:

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

module.exports = function(app) {
  app.use(proxy(‘/api‘, { target: ‘http://localhost:80‘ }));
  // app.use(proxy(‘/test‘, { target: ‘http://localhost:3000‘ }));
  // 省略...
};

需要注意的是,该文件无需在任何地方引入,重新启动项目(npm start)即可。

另外‘/api’意思是碰到这个开头的路径就会走上面的target地址。就是拼接起来的感觉,如:

相当于http://localhost:80/api/react/header.json。

需要注意的是,/api也会拼接上去,如果你的路径没有这个单词,可以使用完整的配置,如下:

app.use(proxy(‘/api‘, {
target: ‘http://localhost:80‘,
changeOrigin:true,
pathRewrite: {
            "^/api": "/" // 把/api 变成空
        }
 }));

相当于http://localhost:80/react/header.json。

跑起来大概是这样子。

如有错误,欢迎指出。

方法3 ?:把node_modules 里的react-scripts删除,重新安装较低的版本。

如: cnpm i [email protected] --save。

这个方法尝试了几次,都没有安装成功,也不太清楚问题在哪里。。

原文地址:https://www.cnblogs.com/caimuguodexiaohongmao/p/11247636.html

时间: 2024-10-26 16:24:33

“proxy” in package.json must be a string 解决办法的相关文章

php json 解析有stdClass Object 解决办法

php json 解析有stdClass Object mixed json_decode ( string $json [, bool $assoc = false [, int $depth = 512 [, int $options = 0 ]]] ) json 待解码的 json string 格式的字符串. This function only works with UTF-8 encoded data. assoc 当该参数为 TRUE 时,将返回 array 而非 object .

dpkg: warning: files list file for package `*****' missing, assuming package has no files currently installed解决办法

一个好友的国外VPS由于操作不当,结果装软件的时候总是提示dpkg: warning: files list file for package `*****' missing, assuming package has no files currently installed,导致无法安装任何软件,结果百度+Google了好多教程,最后找到的解决办法如下: #!/bin/bash set -e # Clean out /var/cache/apt/archives apt-get clean #

.NET Core 3.0 System.Text.Json 和 Newtonsoft.Json 行为不一致问题及解决办法

行为不一致 .NET Core 3.0 新出了个内置的 JSON 库, 全名叫做尼古拉斯 System.Text.Json - 性能更高占用内存更少这都不是事... 对我来说, 很多或大或小的项目能少个第三方依赖项, 还能规避多个依赖项的依赖 Newtonsoft.Json 版本不一致的问题, 是件极美的事情. 但是, 结果总不是不如预期那么简单和美好, 简单测试了下, 有一些跟 Newtonsoft.Json 行为不一致的地方, 代码如下: using Microsoft.VisualStud

ajax json jQuery提示parsererror错误解决办法

1 $.ajax({ 2 type:'POST', 3 url:'<%=basePath%>/xxx.do', 4 dataType:'JSON', 5 data:{ 6 }, 12 success:function(data){ 15 $("#main").html(data.msg); 16 $("#PageContent").html(data.pagerHtml);19 }, 20 error: function(XMLHttpRequest,

sublime使用Package Control不能正常使用的解决办法

Sublime作为一款非常优秀的编辑器,套用中学语文课本里一篇讲梁启超的文章里形容梁启超的一句话,就是“短小精悍”.说它“短小”,是因为它的轻量级:说它“精悍”,则得益于它那包罗万象以适用于任何开发环境的插件功能.而插件的使用,则涉及到一个叫做Package Control的东西. Package Control是一个为了方便管理插件的插件,通过它可以快捷方便的安装和卸载插件. 但很多朋友在第一次使用Package Control时会遇到一个问题,就是: Package Control:Ther

AFNNetworking 中json格式不标准的解决办法

在服务端程序  的头部加上   header("content-type:text/json"); 在服务端程序  的头部加上   header("content-type:text/json"); 在服务端程序  的头部加上   header("content-type:text/json"); 在服务端程序  的头部加上   header("content-type:text/json"); 在服务端程序  的头部加上  

spring mvc 4.1 返回json报406错误的解决办法

浏览器访问,报 The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers. 解决办法,检查springmvc的配置文件中有无 <mvc:annotation-driven />

Maven json包找不到解决办法

在Maven中央仓库找到Maven的jar <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> </dependency> 一直加载不进去....解决办法 1.将包下载好后在自己复制到自己的本地的仓库中 2.将这个改为如下 1 <dependency

centOs安装出现No package git available的解决办法

来源地址 [http://chinacheng.iteye.com/blog/1825538 ] centos安装git 下载源代码安装后,git clone出现“fatal unable to find remote helper for 'https'”的错误,怀疑是git安装不完全 使用yum安装,出现: Java代码   Setting up Install Process No package git available. Nothing to do 解决办法: 需要先添加EPEL(E