nginx服務(wù)器配置解決ajax的跨域問題
更新時間：2017年03月26日 09:55:45 作者：yoyong
本文給大家分享的是一個nginx服務(wù)器配置解決ajax的跨域問題的小技巧，非常的實用，有相同需求的小伙伴可以參考下
在采用jquery ajax調(diào)用http請求時，發(fā)現(xiàn)了一系列問題：
如采用firebug調(diào)試API請求（這個API是自己服務(wù)器的應(yīng)用），看到服務(wù)器明明返回200狀態(tài)，response返回數(shù)據(jù)也是json格式，但ajax返回的error。
在排除json數(shù)據(jù)格式不正確的原因之后，發(fā)現(xiàn)了ajax error函數(shù)返回“networkerror failed to execute ‘send' on ‘xmlhttprequest' failed to load ‘http //“ XMLHttpRequest.status=0，就是沒有初始化。
后來才知道是跨域問題（CORS），因為程序調(diào)用的是遠(yuǎn)程服務(wù)器的API，服務(wù)器不允許跨域調(diào)用。如果只是簡單的方法，只需要在程序的response添加支持跨域的header添加屬性”Access-Control-Allow-Origin: *“即可。如java 服務(wù)器代碼：
yourownvariable.setHeader("Access-Control-Allow-Origin:", "origin url of your site");
yourownvariable.setHeader("Access-Control-Allow-Methods", "GET, POST,PUT");
如果是配置nginx服務(wù)器（如果是其他服務(wù)器，可以參考：I want to add CORS support to my server），需要在nginx.conf配置文件添加一下內(nèi)容：
#
# Wide-open CORS config for nginx
#
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}
}
相關(guān)文章
Nginx實現(xiàn)404錯誤自動跳轉(zhuǎn)到首頁的配置過程
當(dāng)用戶在訪問網(wǎng)站的過程中遇到404錯誤時,通常情況下應(yīng)該顯示一個友好的錯誤頁面,而不是僅僅顯示一個簡單的錯誤提示,在Nginx中,可以通過配置來實現(xiàn)404錯誤自動跳轉(zhuǎn)到首頁的功能,下面將詳細(xì)介紹如何進行配置,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了Nginx負(fù)載均衡健康檢查性能提升,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
本文主要介紹了Nginx配置請求頭攜帶原始請求信息的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
Nginx優(yōu)化服務(wù)之網(wǎng)頁壓縮的實現(xiàn)方法
這篇文章主要介紹了Nginx優(yōu)化服務(wù)之網(wǎng)頁壓縮的實現(xiàn)方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
本文主要介紹了nginx配置同一域名同一端口下部署多個vue項目,可以根據(jù)根路徑不同分別代理訪問不同項目,具有一定的參考價值,感興趣的可以了解一下2024-06-06
Nginx是lgor Sysoev為俄羅斯訪問量第二的rambler.ru站點設(shè)計開發(fā)的。Nginx功能豐富，可作為HTTP服務(wù)器，也可作為反向代理服務(wù)器，郵件服務(wù)器。這篇文章主要介紹了Nginx配置詳解,需要的朋友可以參考下2017-05-05
Nginx配置Https安全認(rèn)證的實現(xiàn)
為了保障應(yīng)用的安全性,我們在架構(gòu)網(wǎng)絡(luò)層的時候需要采用HTTPS協(xié)議。本文介紹了Nginx配置Https安全認(rèn)證的實現(xiàn)，分享給大家，感興趣的可以了解一下2021-05-05
Nginx反向代理和內(nèi)容替換模塊實現(xiàn)網(wǎng)頁內(nèi)容動態(tài)替換功能
Nginx是一款輕量級高性能服務(wù)器軟件,雖然輕量,但功能非常強大,可用于提供WEB服務(wù)、反向代理、負(fù)載均衡、緩存服務(wù)、甚至可以通過添加一些模塊搭建rtmp流媒體服務(wù),最近碰到一個客戶需求,需要用到nginx反向代理替換網(wǎng)頁內(nèi)容,貼出來跟大家交流,如有不足之處請指出2024-10-10
本文主要介紹了nginx各種代理配置大全,主要包括了路徑配置,http跳轉(zhuǎn)https,微信支付的校驗等,具有一定的參考價值,感興趣的可以了解一下2023-09-09
本文詳細(xì)介紹了在Nginx服務(wù)器中配置history模式的方法,具體通過使用try_files指令來實現(xiàn),這種配置方式主要適用于單頁應(yīng)用,可以確保無論訪問什么URL,服務(wù)器總是返回同一個HTML文件,然后由前端路由來處理不同的頁面顯示2024-10-10