跨域请求的解决方案

在请求或提供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)解决

笔者认为这是最经济划算的一种方法，这样前后端代码就都不需要更改，依然按之前的就可以了
但在服务端也有两种方式：

1. 修改请求头
2. 进行反向代理

修改请求头

在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中搭建测试成功
• 上述文字皆为个人看法，如有错误或建议请及时联系我