生活随笔
收集整理的這篇文章主要介紹了
利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
利用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的跨域请求(前后端分离开发调试必备神技)的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
