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

前言

為什么會出現跨域?

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

同源策略

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

解決跨域問題的常見方式

• JSONP
• iframe
• ...(此處省略N種)

• 使用代理(文章主要講到的方法)

  進入今天的主題(^-^)

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

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

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

解壓到自己喜歡的路徑中(不包含中文)

打開conf文件夾->右鍵選擇nginx.conf文件使用你喜歡的文本編輯工具打開

找到文件中的 server部分

編輯server內容為↓

server {listen 8088;#監聽端口server_name localhost;#代理服務地址add_header Access-Control-Allow-Origin *;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,*';}}

常用nginx命令

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

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

配置完成后,保存一下

如果已經打開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 上的資源

解決跨域問題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/"

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

轉載于:https://www.cnblogs.com/roseAT/p/11013868.html

總結

以上是生活随笔為你收集整理的利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。