利用Nginx輕松實現Ajax的跨域請求(前后端分離開發調試必備神技)

利用Nginx輕松實現瀏覽器中Ajax的跨域請求(前后端分離開發調試必備神技)

前言

1. 為什么會出現跨域?

造成跨域問題的原因是因為瀏覽器受到同源策略的限制,也就是說js只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。跨域問題主要是針對js和Ajax的，

同源策略

為保障瀏覽器安全。不同的域名, 不同端口, 不同的協議是不允許共享資源的，

2. 解決跨域問題的常見方式

• JSONP
• iframe
• ...(此處省略N種)
• 使用代理(文章主要講到的方法)

---

進入今天的主題(^-)

使用Nginx反向代理實現ajax進行跨域訪問

1. 首先得把Nginx下載到我們的電腦上來

戳=>ngin官網下載,選擇Stable version(穩定版)中的 nginx/Window版進行下載(文件很小只有不到2M的大小的壓縮包)

2. 解壓到自己喜歡的路徑中(不包含中文)
   
   
   
   
3. 打開conf文件夾->右鍵選擇nginx.conf文件使用你喜歡的文本編輯工具打開
   
4. 找到文件中的 server部分
   
   編輯server內容為↓

 server {
        listen       8088;#監聽端口
        server_name  localhost;#代理服務地址
        
        add_header Access-Control-Allow-Origin *;
        client_max_body_size       1024m; #文件上傳大小限制
	underscores_in_headers on; #去掉過濾header的下畫線
        location / {
            root D:\documents\Competition\labManage\equipmentWeb;#根目錄!!,把這里路徑設置為項目的根路徑
            autoindex on;       #開啟nginx目錄瀏覽功能
            autoindex_exact_size off;   #文件大小從KB開始顯示
            charset utf-8;          #顯示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }

        #開始配置我們的反向代理
        location /api{    #"/api"中的api可以替換為自定義的任何內容
	    rewrite ^/api/(.*)$ /$1 break;
	    include uwsgi_params;
	    proxy_pass http://localhost:9000; #我們要反向代理的地址,這里以本地的tomcat服務器為例
	    charset utf-8;   #顯示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
	}

}

5. 常用nginx命令

(在解壓目錄中打開cmd控制台窗口(可直接站資源管理器路徑的url輸入框中輸入cmd即可直接在解壓目錄打開))

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

6. 配置完成后,保存一下

如果已經打開Nginx,請使用命令重載配置,①停止->②重載配置->③啟動

• 重要!在瀏覽器中輸入 http://localhost:8088/ 即可訪問配置文件中設置的根目錄項目的資源,如果出現404(網頁無法顯示)說明配置不正確,或者修改的配置文件還沒有生效,按上述重載步驟操作一下
  

  
  

• 注意!此時如果使用file:///D:/xxxx.html 本地文件路徑雖然能訪問xxx.html資源文,但仍然不能進行跨域訪問資源的訪問
  
  只有通過 http://localhost:8088/ 打開對應的xxx.html文件才能進行跨域操作,不會被瀏覽器攔截
  
  因為通過這個地址預覽到的HTML文件和請求路徑都在 http://localhost:8088/ 這個域中,

• 最終我們js代碼里的ajax請求的baseUrl路徑就可以使用:
  
  http://localhost:8088/api 完美代替實現跨域訪問=> http://localhost:9000 上的資源

1. 解決跨域問題demo

• 舉個栗子

//一種出現跨域問題的場景
//HTML文件直接通過本地路徑加載 如url:file:///D:/demo/page/index.html
//其中關聯的js代碼為
const baseUrl="http://localhost:9000/testDemo/";
$.ajax({
    url:baseUrl+"test/hello",
    type:"GET",
    success:(res)=>{
        console.log(res);
    }
})

• 想象中情況下(如果沒有跨域問題),將會在瀏覽器控制台中輸出res中的內容,而實際情況是↓
  

  不用看我這里的的請求url,我只是舉個 跨域警告的栗子

• 解決方案

按照前面的步驟完成配置后只需改變代碼中 baseUrl的值,然后通過 http://localhost:8088/xxxx.html 訪問靜態資源,即可進行舒服的跨域請求操作

//改變后的baseUrl
const baseUrl="http://localhost:8088/api/testDemo/"

教程到此結束,如有任何疑問,或者不明白的地方,請在評論區留言,或者私信/發郵件