正式环境vue+axios+nginx跨域配置

• vue.config.js配置
• axios请求
• 服务器Nginx配置

vue.config.js配置

本地开发配置调试跨域

devServer: {
    open: false,
    hot: true,
    proxy: {
    //axios中baseUrl为/baiduApi的请求
      '/baiduApi': {
        target: 'https://aip.baidubce.com', //访问地址
        changeOrigin: true,
        secure: false, //只有代理https 地址需要次选项
        pathRewrite: {
          '^/baiduApi': '' //重写地址
        }
      }
    },
  },

axios请求

axios({
			//这里的baseURL会自动替换成vue.config.js中配置的地址即最终访问地址是https://aip.baidubce.com
            baseURL: '/baiduApi',
            url: `/oauth/2.0/token?grant_type=${grantType}&client_id=${clientId}&client_secret=${clientSecret}&timestamp=${new Date().getTime()}`,
            method: 'get',
            headers: {
              dataType: 'json',
              'Content-Type': 'application/x-www-form-urlencoded'
            }})

//最终完整的访问地址
let baseUrl = https://aip.baidubce.com/oauth/2.0/token?grant_type=${grantType}&client_id=${clientId}&client_secret=${clientSecret}&timestamp=${new Date().getTime()}

服务器Nginx配置

// 将baiduApi 替换成自己定义的名称即可，此段代码需要放在你的访问地址server_name相同的地方
location /baiduApi {
	    rewrite ^/baiduApi/(.*)$ /$1 break;
	    proxy_pass       https://aip.baidubce.com;
	    add_header 'Access-Control-Allow-Origin'	'*';
	}

参考文章：
nginx 反向代理处理跨域问题
vue解决跨域方法