解决本地开发时调用远程AIP跨域问题
最后更新于：2022-04-02 04:31:27
## 解决本地开发时调用远程AIP跨域问题
问题情境：
一般开发在本地，使用的是 Wampserver64，一般为了方便都是一个项目开一个虚拟主机，然后设置host，使用域名重定向，用一个“假域名”来开发调试项目，这样比较方便。
如果调试远程API时，是会有跨域问题的，那么此时可以使用 jsonp，或者设置远程web服务器的`Access-Control-Allow-Origin: *`，但是这两种解决方案都是需要你有远程web服务器的掌控权才可以。
今天遇到一个问题，别人说他那边web服务器和接口不好改动。让我自己本地设置一个nginx的方向代理。
我本地是Apache，不过也是可以配置代理的，配置方法见参考文章。
于是一番倒腾，终于成功了。
其实原理就是：使用反向代理（对用户不可见，对服务器可见）。
利用反向代理，我们可以将 url/api，代理到 远程域名上去。
这样请求 `url/api?a=1` 时，实际上请求的是 `远程域名?a=1`
简单的说，我们通过这个代理配置欺骗了服务器，让它以为我们一直在相同域名下访问资源（请求API）。
代理配置：
~~~
文件：httpd-vhosts.conf
ServerName tang-h5.com
DocumentRoot d:/wamp64/www/tang-h5
# 设置允许跨域 参考：http://blog.csdn.net/linxiangyao/article/details/6107617
Header add Access-Control-Allow-Origin *
Header add Access-Control-Allow-Headers "Content-Type"
# 解决mod_rewrite时pathinfo url参数中不能带有特殊字符问题 参考：http://www.2cto.com/os/201409/338511.html
AllowEncodedSlashes On
Options +Indexes +Includes +FollowSymLinks +MultiViews
AllowOverride All
Require local
ProxyRequests Off
Order deny,allow
Allow from all
ProxyPass /api http://www.xxx.com
~~~
### 参考：
[Apache设置反向代理解决js跨域问题 - 51CTO.COM](http://developer.51cto.com/art/201611/520611.htm)
[Apache设置反向代理解决js跨域问题 - 技术分享 - SegmentFault](https://segmentfault.com/a/1190000007352990?_ea=1318620)
last update：2017-7-31 15:56:32
';