nginx服务器通过配置来解决API的跨域问题
前言
最近在采用jqueryajax调用http请求时，发现了一系列问题：
如采用firebug调试API请求（这个API是自己服务器的应用），看到服务器明明返回200状态，response返回数据也是json格式，但ajax返回的error。
在排除json数据格式不正确的原因之后，发现了ajaxerror函数返回“networkerrorfailedtoexecute‘send'on‘xmlhttprequest'failedtoload‘http//“XMLHttpRequest.status=0，就是没有初始化。
后来才知道是跨域问题（CORS），因为程序调用的是远程服务器的API，服务器不允许跨域调用。如果只是简单的方法，只需要在程序的response添加支持跨域的header添加属性”Access-Control-Allow-Origin:*“即可。
如java服务器代码：
yourownvariable.setHeader("Access-Control-Allow-Origin:","originurlofyoursite");
yourownvariable.setHeader("Access-Control-Allow-Methods","GET,POST,PUT");
如果是配置nginx服务器（如果是其他服务器，可以参考：IwanttoaddCORSsupporttomyserver），需要在nginx.conf配置文件添加一下内容：
#
#Wide-openCORSconfigfornginx
#
location/{
if($request_method='OPTIONS'){
add_header'Access-Control-Allow-Origin''*';
add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS';
#
#Customheadersandheadersvariousbrowsers*should*beOKwithbutaren'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';
#
#Tellclientthatthispre-flightinfoisvalidfor20days
#
add_header'Access-Control-Max-Age'1728000;
add_header'Content-Type''text/plaincharset=UTF-8';
add_header'Content-Length'0;
return204;
}
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';
}
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。