解决本地开发时调用远程AIP跨域问题

kn
2019-10-11 14:37:51
php

问题情境：

一般开发在本地，使用的是 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<VirtualHost *:80>
    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

    <Directory  "d:/wamp64/www/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require local    </Directory>


    ProxyRequests Off    <Proxy *>
      Order deny,allow
      Allow from all    </Proxy>
    ProxyPass /api http://www.xxx.com</VirtualHost>