vue-cli3.0 配置请求跨域nginx代理转发微信 {“errcode“:40066,“errmsg“:“invalid url hint: [FZbxRA0556sz12!]“}错误

最新推荐文章于 2024-03-07 12:57:50 发布

原创最新推荐文章于 2024-03-07 12:57:50 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

本文详细介绍如何在Vue-cli3.0项目中配置代理，解决跨域问题，通过修改vue.config.js文件设置代理路径，调整axios请求方式，并进行nginx代理转发配置，最后重启nginx服务，实现与微信接口的完美对接。

1.vue-cli3.0项目新建一个vue.config.vue文件中配置代理路径

devServer: {
        // port: 3000, // 端口号
        // 允许外网访问
        //disableHostCheck: true,
        proxy: {
            '/wxapi': {     //这里最好有一个 /
                target: 'https://api.weixin.qq.com/',  // 后台接口域名
                //ws: true,
                changeOrigin: true,  //是否跨域
                pathRewrite:{
                    '^/wxapi':''
                }
            },
        }
    },

2.访问路径跟改为

getAccessTokenUrl: '/wxapi/sns/oauth2/access_token', //获取openid

#axios请求接口 params请求微信接口参数
getAccessToken({dispatch, commit, state}, params) {
       return http({
                method: 'GET',
                url: state.getAccessTokenUrl + '?' + qs.stringify(params)
       })
},

3.nginx配置代理转发

location /wxapi { #添加访问目录为/apis的代理配置
      rewrite  ^/wxapi/(.*)$ /$1 break;  #重定向(这个必须配置否则微信40066错误)
      proxy_pass  https://api.wein.qq.com;  #目标地址
}

4.重启nginx服务，完美解决