前端代理部署问题

作为前端最常出现的两个场景。

一，打包再本地部署

二，打包给服务器部署

不管哪种都属要配置代理才能解决跨域问题

VUE

主要是两个文件。

1.根目录下的vue.config.js中的 devServer  属性下进行配置.代理后访问 localhost:8088/ = http://xxx.xxx.xxx.xx/api

  devServer: {
    port: 8088,//代理端口
    proxy: {
      '/api': {   // 以 “/api” 开头的 代理到下边的target属性的值中
        target: 'http://xxx.xxx.xxx.xx',// 环境网址
        changeOrigin: true,// 是否跨域
        pathRewrite: {
          '^/api': ''// 路径重写
        }
      },
    },
  },
publicPath: "/",// 部署应用包时的基本 URL
/*
如果修改为publicPath:"/app",则项目首页路径:
从http://localhost:8088/#/index变为http://localhost:8088/app/#/index
*/

注：只需要更改接口地址就可以切换不同环境。记得改完配置文件，要重启项目，才生效

2.configs文件下index.ts网络请求接口配置。访问到环境后有各种类型的接口有不同的前缀，根据需要进行配置

 

const ip = '/api';

// 后台数据路径
export const serverIp = `${ip}/data`;
// 图片数据路径
export const prefixIp = `${ip}/img`;

React

1.只需在根目录下package.json文件里添加属性

  "proxy": "http://xxx.xxx.xxx.xxx"

2.config里的配置同上

// 后台数据路径
export const serverIp = `/data`;
// 图片数据路径
export const prefixIp = `/img`;