实现前后分离解决的跨域问题

   用nginx做代理即可，前端连接nginx，nginx的localtion的时候匹配的是域名之后的路劲，然后更换的也是域名部分，后面的路径直接拼接

   当然也可写正则表达式重写，改变这种拼接的规则

以下的例子是重写之后的

rewrite  ^.+apis/?(.*)$ /$1 break;

 

 

这里，我们利用Nginx的反向代理功能解决跨域问题，至于，什么是Nginx的反向代理，大家就请自行百度或者谷歌吧。

 

nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。

 

具体解决方案如下：

 

在nginx.conf中编辑

 

server {

        location / {

            root   html;

            index  index.html index.htm;

            //允许cros跨域访问

            add_header 'Access-Control-Allow-Origin' '*';

 

        }

        //自定义本地路径

        location /apis {

            rewrite  ^.+apis/?(.*)$ /$1 break;

            include  uwsgi_params;

            proxy_pass   http://www.lyz.com;

       }

}

然后我把项目部署在nginx的html根目录下，在ajax调用时设置url从http://www.lyz.com/apistest/test变为/apis/apistest/test然后成功解决。

 

比如我之前请求的Ajax如下：

 

$.ajax({

        type:"post",

        dataType: "json",

        data:{'parameter':JSON.stringify(data)},

        url:"http://www.lyz.com/apistest/test",

        async: flag,

        beforeSend: function (xhr) {

 

            xhr.setRequestHeader("Content-Type", submitType.Content_Type);

            xhr.setRequestHeader("user-id", submitType.user_id);

            xhr.setRequestHeader("role-type", submitType.role_type);

            xhr.setRequestHeader("access-token", getAccessToken().token);

        },

        success:function(result, status, xhr){

     

        }

        ,error:function (e) {

            layerMsg('请求失败，请稍后再试')

        }

    });

修改成如下的请求即可：

 

$.ajax({

        type:"post",

        dataType: "json",

        data:{'parameter':JSON.stringify(data)},

        url:"/apis/apistest/test",

        async: flag,

        beforeSend: function (xhr) {

 

            xhr.setRequestHeader("Content-Type", submitType.Content_Type);

            xhr.setRequestHeader("user-id", submitType.user_id);

            xhr.setRequestHeader("role-type", submitType.role_type);

            xhr.setRequestHeader("access-token", getAccessToken().token);

        },

        success:function(result, status, xhr){

     

        }

        ,error:function (e) {

            layerMsg('请求失败，请稍后再试')

        }

    });

至此，问题解决。

 

 例如：

 

前后分离的时候，第一个login页面是在前端，其他的页面也是在前端，此时拦截的是前端发起接口的路径特征

 

对于网上源码需要改造成前后分离的，此时nginx的跨域处理不要误以为直接访问nginx到源码首页就可-----这种只是代理分发---负载均衡

而是需要拦截前端发起请求接口的特征

 

前端项目源码：

 

export default {

  dev: {

    host: '/api/v3',

    shareHost: '/share.html'

  },

  production: {

  //  host: '/api/v1',

    host: '/api/v3',

    shareHost: '/share.html'

  }

}

 

配置：

upstream apachephp  {

    server 192.168.202.183:8080; #Apache-----后端项目源码地址

}

 

    server {

        listen       8089;

        server_name  localhost;

 

        #charset koi8-r;

 

        #access_log  logs/host.access.log  main;

 

       

 

     location / {---------------一般用精确的项目特征路劲

        proxy_pass  http://apachephp;

 

        #Proxy Settings

        proxy_redirect     off;

        proxy_set_header   Host             $host;

        proxy_set_header   X-Real-IP        $remote_addr;

        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;

        proxy_max_temp_file_size 0;

        proxy_connect_timeout      90;

        proxy_send_timeout         90;

        proxy_read_timeout         90;

        proxy_buffer_size          4k;

        proxy_buffers              4 32k;

        proxy_busy_buffers_size    64k;

        proxy_temp_file_write_size 64k;

   }

 

     location /api {---------------一般用精确的项目特征路劲,域名部分替换

        proxy_pass  http://apachephp;

 

        #Proxy Settings

        proxy_redirect     off;

        proxy_set_header   Host             $host;

        proxy_set_header   X-Real-IP        $remote_addr;

        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;

        proxy_max_temp_file_size 0;

        proxy_connect_timeout      90;

        proxy_send_timeout         90;

        proxy_read_timeout         90;

        proxy_buffer_size          4k;

        proxy_buffers              4 32k;

        proxy_busy_buffers_size    64k;

        proxy_temp_file_write_size 64k;

   }

 

 

 

 

 

原文链接：https://blog.csdn.net/l1028386804/article/details/79488328