vue-cli3 axios去除预检请求OPTIONS 做请求代理

本地开发

在 vue.config.js 配置代理

proxy: {
  '/api': {
    target: 'https://easy-mock.com/mock/5cce946a3d417120b6186d75/data_demo', // 接口地址
    secure: false,  //https请求需要这个参数
    changeOrigin: true,  //是否跨域
    pathRewrite: { '^/api': '' } //需要pathRewrite
  }
}

这里的 api  名称就是你原来的域名配置  你要其他名字也可以

<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
  <script>window.SITE_CONFIG['apiURL'] = '/api';</script>
<% } %>

代码

/**
 * 配置参考: https://cli.vuejs.org/zh/config/
 */
module.exports = {
  baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
  productionSourceMap: false,
  devServer: {
    open: true,
    port: 8001,
    proxy: {
      '/api': {
        target: 'https://easy-mock.com/mock/5cce946a3d417120b6186d75/data_demo',
        secure: false,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    },
    overlay: {
      errors: true,
      warnings: true
    }
  }
}

重启项目OPTIONS请求就没有了

打包后这个页面就没法代理了  所有要放在nginx 服务器下做代理

线上部署

NGINX服务器安装

下载安装  不多说了  

启动服务  start nginx       停止服务  nginx -s stop

配置 nginx.conf 文件

加上

 location /api {
            proxy_pass https://easy-mock.com/mock/5cce946a3d417120b6186d75/data_demo;
            proxy_redirect default;
        }

就可以做好服务代理了

 

这里要感谢同事指出不足之处