问题背景：前端利用了基于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
