标签：axios 跨域 baiduApi 地址 vue https

正式环境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解决跨域方法

标签：axios,跨域,baiduApi,地址,vue,https
来源： https://blog.csdn.net/qq2037074969/article/details/122686721

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。