配置nginx的反向代理解决前端的跨域问题

问题背景：前端利用了基于express的webpack-dev-server包，然后需要访问不允许跨域的豆瓣电影的api（https://api.douban.com/v2/movie/in_theaters），
而在页面上不能通过ajax的方式直接访问到豆瓣api

首先看看我的ajax代码

let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    console.log(JSON.parse(xhr.responseText));

                } else {
                    console.log(JSON.parse(xhr.responseText));
                }
            }
        };
        xhr.open(
            'get',
            'https://api.douban.com/v2/movie/in_theaters',
            true);
        xhr.send();

上面的代码就是我在利用豆瓣api折腾一个东西时，利用ajax获取https://api.douban.com/v2/movie/in_theaters的资源时，遇到了这个问题：

看到'Access-Control-Allow-Origin'的错误也有点熟悉了，这不就是由于后端不允许跨域请求引起的吗！
说到跨域，一般是只能让后端配置允许跨域，
然后我就想到了之前看到过的“利用nginx的反向代理解决跨域”相关地文章和讨论，然后搜索了相关地配置后就开始尝试一下。

访问方式：express（webpack-dev-server）-------nginx-------豆瓣服务器
首先：
找到server -- location ，修改为

server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /apis {
            rewrite  ^.+apis/?(.*)$ /$1 break;
            proxy_pass   https://api.douban.com/;

proxy_pass : 把请求代理到其他主机
/apis : 用于拦截请求，匹配任何以/apis开头的地址
rewrite : 代表重写拦截进来的请求，并且只能对域名后边的除去传递的参数外的字符串起作用，例如http://localhost:8081/apis/v2/movie/in_theaters重写。只对/apis/v2/movie/in_theaters重写。

大概的意思就是，当访问***/apis****的地址时，就会被拦截，然后变成访问‘https://api.douban.com****’

由于静态文件（html、JavaScript等）并不是放在nginx上面运行起来的，所以还要在location 里面添加上

            add_header 'Access-Control-Allow-Headers' 'Content-Type';  
            add_header 'Access-Control-Allow-Origin' '*';  
            add_header 'Access-Control-Allow-Methods' 'GET'; 

最后在ajax的代码修改成

let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    console.log(JSON.parse(xhr.responseText));

                } else {
                    console.log(JSON.parse(xhr.responseText));
                }
            }
        };
        xhr.open(
            'get',
            'http://localhost:8081/apis/v2/movie/in_theaters',
            true);
        xhr.send();

最后到浏览器的控制台看一下结果：

完成！

原文链接：http://www.helloyoucan.com./article/59aacac340f3700a74eed27f