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 中文文档Create React App proxy配置_第1张图片
接着终于成功了

踩坑二

完成后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/' }));
};

Create React App proxy配置_第2张图片
又报错了
(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配置文件修改
Create React App proxy配置_第3张图片
然鹅后台小哥没理我,他说先找易连云的工作人员沟通一下。。。
后来终于说服他去改nginx了,然后线上版本终于通了。
然而我本地打的包用vscode live server打开还是报405,可能也需要服务器配置一下代理?

未完待续。。。。

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

你可能感兴趣的:(react,前端)