react 开发环境-生产环境-跨域处理

1.环境

"react": "^16.13.1",

"http-proxy-middleware": "^1.0.5",

2.开发环境-跨域处理：

01：创建setupProxy.js文件，内容如下：

** 注意文件位置，默认在src下，可根据下图，自行设置

02：.代码：

/**
 * @desc 配置开发环境代理
 */
const { createProxyMiddleware } = require('http-proxy-middleware')


const createProxy = (url = '', target = '') =>
  createProxyMiddleware(url, {
    target,
    changeOrigin: true,
    pathRewrite: {
      [`^${url}`]: '',
    },
  })



/**
 * 默认代理
 */
module.exports = function (app) {
  app.use(
     createProxy('/proxy', `http://XXX`),//开发
  )
}

03：.使用 

/**
*使用
*/
const url = /proxy/xxx
const res = await get(url)

3.生产环境+Nginx=跨域处理

参考：

https://www.cnblogs.com/lovesong/p/10269793.html

https://jingyan.baidu.com/article/fa4125acf2ffcd28ad709243.html

01：在Ajax地址请求文件中 url依旧是带前置代理的地址，不需要拼接本地地址

即：开发环境用的是 '/api-juhe/ip/ipNew'；则生产环境一样用 '/api-juhe/ip/ipNew'，不需要额外拼接地址，因为nginx配置文件会识别/api-juhe，去映射真正的请求地址

02：Nginx文件处理

安装参考：https://www.cnblogs.com/wcwnina/p/8728430.html

** 启动命令：start nginx

**每次更改config配置文件，都需要重启nginx，命令 ./nginx -s reload

config文件配置：

#默认代码-无须改动
...
server {
        #监听端口
        listen       80;
        #本地服务地址
        server_name  127.0.0.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            #本地服务完整地址
            proxy_pass http://127.0.0.1:8080;
        }
        #/api-juhe 代理名称
        location /api-juhe {
            #指向真正的请求地址
            proxy_pass http://apis.juhe.cn/;
        }
        #默认代码-无须改动
       ...
    }

 

03：再次访问地址则使用 http://127.0.0.1    不需要再加端口