解决阿里云ECS运行前后台分离项目调用QQ互联导致： redirect uri is illegal

Meathill 发布于2019-07-25 14:25 / 743人阅读

摘要：我的项目使用的是前后台分离，前台使用的是，所在的域名是，后台接口的域名是，然后我现在开发和微信的第三方登录，配置的回调域是，然后我把这个地址放到前台里面的登录页面的标签中，设置，但是点击跳转下面的错，经过分析发现跟阿里云服务器文件和配置域

我的项目使用的是前后台分离，前台使用的是VUEJS，所在的域名是www.xfindzp.com，后台接口的域名是api.xfindzp.com，然后我现在开发QQ和微信的第三方登录，配置的回调域是：https://api.xfindzp.com/socia...，然后我把这个地址放到前台www.xfindzp.com里面的登录页面的a标签中，设置href="https://api.xfindzp.com/social-login/qq"，但是点击跳转下面的错，经过分析发现跟阿里云服务器/etc/hosts文件和nginx配置api.xfindzp.com域名文件有关，所以记录下解决过程，分享给大家：

1、修改/etc/hosts文件

192.168.0.81 xfindzp.com api.xfindzp.com
47.97.127.145 xfindzp.com api.xfindzp.com
127.0.0.1   xfindzp.com api.xfindzp.com localhost localhost.localdomain localhost4 localhost4.localdomain4
::1        xfindzp.com api.xfindzp.com localhost localhost.localdomain localhost6 localhost6.localdomain6

2、修改配置域名api.xfindzp.com的nginx配置文件，如下：

server {
        listen       80;
        server_name  api.xfindzp.com;
        location / {
                proxy_pass http://api.xfindzp.com:6060; #这里的端口记得改成项目对应的哦
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Forwarded-Port $server_port;
        }
    }

   server {
        listen       443 ssl;
        server_name  api.xfindzp.com;

        ssl_certificate      /usr/local/nginx/cert/api.xfindzp/214731881260330.pem;
        ssl_certificate_key  /usr/local/nginx/cert/api.xfindzp/214731881260330.key;

        location / {
                #1、这里的api.xfindzp.com如果写成localhost或者127.0.0.1，那么肯定会报：redirect uri is illegal(100010)
                #2、api.xfindzp.com想让它起作用，必须在/etc/hosts文件里面配置好，并重启服务器，否则也不会生效
                proxy_pass http://api.xfindzp.com:6060; 
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Forwarded-Port $server_port;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
        }
    }

3、配置好两个文件，然后重启下服务器ECS就成功了，当重新访问就成功了！

4、总结：
1）分析问题原因，当报错的时候查看qq返回的url，发现有127地址，所以就查看nginx配置文件，发现确实是自己设置了127地址，改成api.xfindzp.com之后后台又访问不了，然后又把api.xfindzp.com域名放到/etc/hosts里面，重启才生效
2）网上也有其它相关的解决方法，我这个只针对我的问题。

5、引用：
1)Spring Security源码分析三：Spring Social实现QQ社交登录
2)腾讯开放平台联调工具集
3)centos6.x配置虚拟主机名及域名hosts
4)修改centos等linux的hostname-永久生效
5)Linux修改本机/etc/hosts的hostName后经常不生效
6)redirect uri is illegal(100010)

后续：2018-8-23 21:51

按照上面设置成功是成功，但是后台接口域名api.xfindzp.com每隔多长时间访问就会非常卡处于pending，没办法我又换成localhost或者127或者自己的内网ip了，这样一来QQ互联就还是有问题，然后在网上找到一段代码proxy_set_header Host $host;设置一下居然成功了，如下：

server {
        listen       80;
        server_name  api.xfindzp.com;
        location / {
                proxy_pass http://192.168.0.81:6060; #这里的端口记得改成项目对应的哦
                # 设置成这个就好了
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Forwarded-Port $server_port;
        }
    }

   server {
        listen       443 ssl;
        server_name  api.xfindzp.com;

        ssl_certificate      /usr/local/nginx/cert/api.xfindzp/214731881260330.pem;
        ssl_certificate_key  /usr/local/nginx/cert/api.xfindzp/214731881260330.key;

        location / {
                proxy_pass http://192.168.0.81:6060;
                # 设置成这个就好了
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Forwarded-Port $server_port;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
        }
    }

引用：
1)Nginx配置proxy_pass转发的/路径
2)在Nginx中$host和$http_host有什么区别

idc机房托管混合云阿里云前后端分离项目怎么部署服务器前后端分离项目部署云服务器阿里云服务器运行php项目前后端分离

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40088.html

微信开发-获取用户授权-node.js实现

摘要：本篇主要讲述，如何在微信中打开自家页面后，弹窗请求用户授权，以便拿到用户的微信信息。填写信息，绑定微信，注册完成，登录进去。本篇主要讲述，如何在微信中打开自家页面后，弹窗请求用户授权，以便拿到用户的微信信息。首先说一下，完成自定义分享信息的，从无到有的流程：基础硬件服务：需要一个公网可以访问的有效域名：购买域名，并备案，我是在阿里云购买的，备案需要十几个工作日。购买i...

littleGrow 2019-08-23 16:00 评论0 收藏0
微信开发-获取用户授权-node.js实现

摘要：本篇主要讲述，如何在微信中打开自家页面后，弹窗请求用户授权，以便拿到用户的微信信息。填写信息，绑定微信，注册完成，登录进去。本篇主要讲述，如何在微信中打开自家页面后，弹窗请求用户授权，以便拿到用户的微信信息。首先说一下，完成自定义分享信息的，从无到有的流程：基础硬件服务：需要一个公网可以访问的有效域名：购买域名，并备案，我是在阿里云购买的，备案需要十几个工作日。购买i...

wwq0327 2019-08-02 14:32 评论0 收藏0
服务器小白的我,是如何成功将 node+mongodb 项目部署在服务器上并进行性能优化的

摘要：前言本文讲解的是做为前端开发人员，对服务器的了解还是小白的我，是如何一步步将项目部署在阿里云的服务器上，并进行性能优化，达到页面秒内看到，秒内看到首屏内容的。搭建的项目是采用了主流的前后端分离思想的，这里只讲服务器环境搭建与性能优化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言本文讲解的是：做为前...

zsy888 2019-06-26 17:54 评论0 收藏0
阿里云产品头条（2017年12月刊）

摘要：性能平台公测发布性能平台，是由阿里云所提供的，面向中大型应用提供性能监控安全提醒故障排查性能优化等服务的整体性解决方案。业务实时监控服务版本发布，新增应用监控功能等重磅功能业务实时监控服务简称是一款阿里云类监控产品。摘要：一、新产品发布1、云防火墙商业化发布云防火墙是一款云环境下的防火墙产品，首创了基于业务可视的结果，实现业务梳理和业务隔离的技术。适用于互联网／通用／游戏／金融...

sixleaves 2019-05-28 18:39 评论0 收藏0
99%的人都不知道春节抢票背后云计算在加持

摘要：春节抢票应该是每个在外游子的必修课，还有不足一个月就要过春节了，现在的你，是不是还奋战在抢票一线呢说到抢票，之所以现在大家能享受到流畅的移动互联网购票服务，其实背后都是云计算在加持，没想到吧，原来看似高深的云计算离我们如此之近。春节抢票应该是每个在外游子的必修课，还有不足一个月就要过春节了，现在的你，是不是还奋战在抢票一线呢？说到抢票，之所以现在大家能享受到流畅的移动互联网购票服务，其实背后...

megatron 2019-04-29 18:44 评论0 收藏0