快捷導(dǎo)航

Nginx解決轉(zhuǎn)發(fā)地址時(shí)跨域的問(wèn)題

更新時(shí)間：2017年01月16日 10:25:09 作者：DecemberCafe

這篇文章主要介紹了Nginx實(shí)現(xiàn)轉(zhuǎn)發(fā)地址解決跨域問(wèn)題的方法，文中介紹的很詳細(xì)，對(duì)大家的學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。

一、什么是跨域問(wèn)題

在一個(gè)服務(wù)器A里放置了json文件，另一個(gè)服務(wù)器B想向A發(fā)送ajax請(qǐng)求，獲取此文件，會(huì)發(fā)生錯(cuò)誤。

Chrome提示：

XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

這就是跨域問(wèn)題。解決方案有不少，比較好的是服務(wù)器端配置CORS，但要求服務(wù)器端做更改。如果在不需要更改服務(wù)器端的情況下解決呢？尤其是需要在本地測(cè)試的時(shí)候。

二、配置Nginx

打開nginx目錄下的conf文件夾。打開nginx.conf，將其中的http請(qǐng)求修改為：

http {
  include mime.types;
  server {
    listen    80;
    server_name localhost;
    charset UTF-8;

  location / {
    root html;
    index index.html index.htm;
  }

    # Avoid CORS and reverse proxy settings
    location /api/ { # [2]
      proxy_http_version 1.1;
      proxy_pass http://www.des.com/; # [3]

      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
      add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
      add_header Access-Control-Allow-Credentials true;
    }
  }
}

注意粗體字的部分，/api/表示當(dāng)請(qǐng)求api目錄時(shí)，轉(zhuǎn)向http://www.des.com/域名。

例如，請(qǐng)求：

http://127.0.0.1/api/ 就會(huì)轉(zhuǎn)向 http://www.des.com/

http://127.0.0.1/api/aaa/bbb/ 就會(huì)轉(zhuǎn)向 http://www.des.com/aaa/bbb/

這種由服務(wù)器轉(zhuǎn)發(fā)的請(qǐng)求，可以突破跨域的限制，因此ajax也可以正常工作。

注意： /api/ 不行寫成 /api。

http://www.des.com/ 也不能寫成 http://www.des.com

三、配置hosts

為了在本機(jī)測(cè)試看起來(lái)更像在目標(biāo)服務(wù)器上測(cè)試，可以設(shè)置系統(tǒng)的hosts文件。

每個(gè)系統(tǒng)（windows、Linux、Mac OS）都有hosts文件，它是本地的域名解析器。

通常，我們請(qǐng)求一個(gè)域名，如www.baidu.com，首先要向域名服務(wù)器請(qǐng)求百度的IP地址，然后再根據(jù)IP地址來(lái)訪問(wèn)。

也可以不需要咨詢域名服務(wù)器，直接在本地的hosts鍵入百度的IP地址。