来领礼包啦!每天均可领,红包更大啦!进[支付]宝搜索词542337256领取

起因

自己在开发第三方登录时获取到了用户的openid access_token oauth_consumer_key 三个参数以后要使用axios请求https://graph.qq.com/user/get_user_info 由于没有做跨域处理会报以下错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://aming.dev.com' is therefore not allowed access.

翻阅了好多资料发现ajax有jsonp可以使用跨域请求,想了一下项目一定不能使用jquery所以只好使用其他的方法。

解决方法

nginx是一个很好的反向代理服务器,我们可以把请求的网址代理到自己的网站上在同一个域下就不会是跨域请求,好了直接上代码

server {
        listen 80;
        server_name aming.dev.com;

        location / {
            proxy_pass  http://127.0.0.1:9020/;
            proxy_redirect     off;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
# api的代理地址
        location /application { 
            proxy_pass  http://127.0.0.1:9600/;
            proxy_redirect     off;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
# QQ授权获取数据的地址
        location /agentQQ {
            proxy_pass  https://graph.qq.com/user/get_user_info;
            proxy_redirect     off;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
    }

nginx配置以上代码可以实现跨域请求也就不会报错了,可以在同一个域名下请求数据

axios.get('/agentQQ', {
	params:{
		access_token: Cookies.get()['accessToken'],
		oauth_consumer_key: '********',
		openid: Cookies.get()['openId'],
			}
		})
		.then((response) => {
			console.log(response.data);
		})
		.catch((err) => {
		console.log(err.response);
});