美文网首页
跨域请求的解决方案

跨域请求的解决方案

作者: EarthChen | 来源:发表于2017-08-06 18:16 被阅读211次

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

    相关文章

      网友评论

          本文标题:跨域请求的解决方案

          本文链接:https://www.haomeiwen.com/subject/cflnlxtx.html