Create React App proxy配置

最近又吃了没文化的亏（哭晕在洗手间≧ ﹏ ≦）
做后台管理系统的时候，需要调一个易连云打印小票的接口，
项目框架是 Create React App+typescript，后端是node.js
本媛负责前端开发。下面是一些踩坑经历，都怪我学术不精，又吃了没文化的亏

踩坑一

调易连云接口时候，因为是第三方接口，报了跨域的错误，所以就用配置proxy的方法。
请求报错
1.Provisional headers are shown
（请求没发出去？emmmm）
2.‘has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’
(跨域错误)
3.配置proxy
在package.json中进行配置

proxy:{
    '/api':{
        target:'http.....', 
        changeOrigin:true, 
    }
}

重新跑一下又报错了
（一定要重跑，不然没反应）
（When specified, “proxy” in package.json must be a string. Instead, the type of …）
看一眼文档
Create React App 中文文档在这里插入图片描述
接着终于成功了

踩坑二

完成后build打包到测试服，发现报405了，Status Code: 405 Method Not Allowed
再看一眼官方文档

请记住，proxy 只在开发环境中有效（使用 npm start ）

那生产环境咋办呢？

（怪我没有好好看文档）
官网上提供了另一种方法

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

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

在这里插入图片描述
又报错了
（proxy is not a funciton）

百度了一下

改成这样


const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    createProxyMiddleware(
      '/api',
      {
        target: 'https://',
        changeOrigin: true,
        secure: true
      }
    )
  )
}

然后我自己打个包，直接用live server打开index.html,然而还是报405，又百度了一会，
其中我还尝试了jsonp,$.ajax,fetch,等等都不行

难道要后端改nginx？
nginx配置文件修改
在这里插入图片描述
然鹅后台小哥没理我，他说先找易连云的工作人员沟通一下。。。
后来终于说服他去改nginx了，然后线上版本终于通了。
然而我本地打的包用vscode live server打开还是报405，可能也需要服务器配置一下代理？

扫描二维码关注公众号，回复： 15491711 查看本文章

未完待续。。。。

路漫漫其修远兮吾将上下而求索

Create React App proxy配置

踩坑一

踩坑二

猜你喜欢