在请求或提供api的时候，我们经常会遇到跨域问题，这是由于安全问题，但是有时候我们必须去允许跨域请求，不然我们将拿不到后端传过来的数据
所以，笔者在这里总结了一下相关解决方案
解决方案
使用jsonp解决
使用jsonp方式去请求数据能以get方式请求，但是不能以post方式发送数据
使用这种方式需要前后段都做相应的修改
前端
笔者这里使用jQuery来进行ajax请求
我们需要在前端请求的url中添加一个callback回调参数
<script>
function test() {
$.getJSON("http://10.127.48.204:8000/snippets/1/?callback=?", //注意结尾的callback
function (result) {
if (result) {
document.write(result.style);
}
});
}
</script>
后端
笔者这里是用的django的后台，其他语言自行探索一下，都是大同小异的
定义好路由之后，我们只需要在view里进行一点简单的修改就好
def test(request):
callback = request.GET['callback']
return HttpResponse('%s(%s)' % (callback,json.dumps({'name': 'test'})))
得到ajax传来的callback然后返回就好
这样就实现了很简单的跨域请求数据，不过需要前后端都进行支持，比较麻烦。。。。。
修改请求头解决
在后端直接修改允许的请求头
def myview(request):
response = HttpResponse(json.dumps({“key”: “value”, “key2”: “value”}))
response[“Access-Control-Allow-Origin”] = “*”
response[“Access-Control-Allow-Methods”] = “POST, GET, OPTIONS”
response[“Access-Control-Max-Age”] = “1000”
response[“Access-Control-Allow-Headers”] = “*”
return response
安装django-cors-headers解决
笔者用的是django，刚好有人写好了一个库
安装
pip install django-cors-headers
在settings.py中设置
INSTALLED_APPS = [
...
'corsheaders'，
...
]
MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware', # 注意顺序
...
)
CORS_ORIGIN_WHITELIST = (
#'*'
'127.0.0.1:8080',# 请求的域名
'localhost:8080',
'localhost',
)
配置好允许的域就可以跨域了
在服务器端(nginx)解决
笔者认为这是最经济划算的一种方法，这样前后端代码就都不需要更改，依然按之前的就可以了
但在服务端也有两种方式：
- 修改请求头
- 进行反向代理
修改请求头
在nginx的配置文件里添加如下配置即可
nginx.conf
http {
......
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
......
}
这样就可以实现GET,POST,OPTIONS的跨域请求的支持
也可以 add_header Access-Control-Allow-Origin http://127.0.0.1:8000; --指定允许的url;
进行反向代理
同样在万能的nginx配置文件修改即可
/etc/nginx/sites-enabled/8001test
server {
listen 8001;
server_name _;
index index.html;
location / {
try_files $uri $uri/ =404;
}
location /apis {
rewrite ^.+apis/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://127.0.0.1:8000; #需要代理到的地址
}
}
注：
- /apis是需要在请求中加的前缀，请求到这个参数会通过转换url然后代理到新的地址
- proxy_pass http://127.0.0.1:8000 需要代理到的地址
前端只需要在请求url中加个apis前缀就好
<script type="text/javascript">
//利用反向代理解决跨域测试
function nginx_test(){
$.ajax({
url: "/apis/test/",
type:"get",
success:function(result){
alert(result.name);
}
})
}
</script>
笔者比较推荐最后一种方法，个人觉得这种方法最经济划算。也可以根据需求来选择是否需要跨域代理
注：
- 上述环境在ubuntu16.04 lts中搭建测试成功
- 上述文字皆为个人看法，如有错误或建议请及时联系我
