問(wèn)題背景：前端利用了基于express的webpack-dev-server包，然后需要訪問(wèn)不允許跨域的豆瓣電影的api（https://api.douban.com/v2/movie/in_theaters），
而在頁(yè)面上不能通過(guò)ajax的方式直接訪問(wèn)到豆瓣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折騰一個(gè)東西時(shí)，利用ajax獲取https://api.douban.com/v2/movie/in_theaters的資源時(shí)晰搀，遇到了這個(gè)問(wèn)題：
看到'Access-Control-Allow-Origin'的錯(cuò)誤也有點(diǎn)熟悉了，這不就是由于后端不允許跨域請(qǐng)求引起的嗎左敌！
說(shuō)到跨域忌警，一般是只能讓后端配置允許跨域，
然后我就想到了之前看到過(guò)的“利用nginx的反向代理解決跨域”相關(guān)地文章和討論掺炭，然后搜索了相關(guān)地配置后就開(kāi)始嘗試一下辫诅。
訪問(wèn)方式：express（webpack-dev-server）-------nginx-------豆瓣服務(wù)器
首先：
找到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 : 把請(qǐng)求代理到其他主機(jī)
/apis : 用于攔截請(qǐng)求涧狮，匹配任何以/apis開(kāi)頭的地址
rewrite : 代表重寫(xiě)攔截進(jìn)來(lái)的請(qǐng)求炕矮，并且只能對(duì)域名后邊的除去傳遞的參數(shù)外的字符串起作用，例如http://localhost:8081/apis/v2/movie/in_theaters重寫(xiě)者冤。只對(duì)/apis/v2/movie/in_theaters重寫(xiě)肤视。
大概的意思就是，當(dāng)訪問(wèn)***/apis****的地址時(shí)涉枫，就會(huì)被攔截邢滑，然后變成訪問(wèn)‘https://api.douban.com****’
由于靜態(tài)文件（html、JavaScript等）并不是放在nginx上面運(yùn)行起來(lái)的愿汰，所以還要在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();
最后到瀏覽器的控制臺(tái)看一下結(jié)果：
完成困后！
原文鏈接：http://www.helloyoucan.com./article/59aacac340f3700a74eed27f
