1. 程式人生 > >使用Nginx 實現純前端跨域(轉載+彙總)

使用Nginx 實現純前端跨域(轉載+彙總)

  1. 你是否厭倦了老是依賴後臺去處理跨域,把握不了主動權
  2. 你是否想模仿某個app倒騰一個demo,卻困於介面無法跨域

那麼很幸運,接下來我將現實不依賴任何後臺,隨心所欲的想訪問哪個域名就訪問哪個!

下載完之後,我們就可以 愉快的玩耍啦。本文是在window 系統下的操作的

  • 本應該呼叫的地址 //api.douban.com/v2/book/search?q=解憂雜貨店&tags=12

  • 例如本地電腦ip:192.168.1.168
  • 實現跨域後豆瓣介面呼叫的地址: //192.168.1.168/douban/v2/book/search?q=解憂雜貨店&tags=12

完整配置檔案

啟動nginx

將上面的配置檔案替換你本地的nginx.conf
更改ip地址,server監聽埠
cd到nginx存放的根目錄

start nginx.exe

測試效果:

nginx常用的幾個命令:

start nginx.exe //啟動
nginx.exe -s reload //重啟
nginx.exe -s stop //快速停止
nginx.exe -s quit //完整有序停止

Nginx解決跨域問題(CORS)

簡單配置:

server {
        listen       80;
        server_name  b.com;
        location /{
            add_header 'Access-Control-Allow-Origin' 'http://a.com';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET';
        }
}