前后端分离跨域问题解决方案

其实呢跨域问题主要原因就是浏览器的同源策略导致的，所以呢想办法解决这个问题就好了。

主要就是在请求的时候加上以下代码吧

Access-Control-Allow-Origin *;
Access-Control-Allow-Headers X-Requested-With;
Access-Control-Allow-Methods *;

这些东西网上一收一大堆，我就不多说啦，时间紧迫

 

 

通常来说在请求后端时都会加上一个url前缀，这里我就定为最常用的/api了，下边示例都已这个为主 

1.基于vue-cli开发

　　　　在开发阶段可以通过webpack的配置来解决跨域这个问题，在项目更目录下创建vue.config.json,具体配置如下:

　　　　

module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 80,
        //代理
        proxy: {
            '/api': {
                target: 'http://localhost:2626',
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

2.基于nginx

• 不重写url

　　　　首先安装nginx，这里就不多说了，网上很多安装示例

　　　　

　　　　　　location ^~/api/{
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Credentials true;
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }          proxy_pass http://fvs-web-server/;
        }

解释一下这里的 proxy_pass 后边的地址是在 upstream模块中定义的:

 upstream fvs-web-server{
        server 192.168.202.131:2626 weight=5;
    }

 

这种方法就比价简单粗暴了，通过nginx的转发机制直接转发即可,但是在转发的时候最后一定要加上一个 / ，这样nginx会把/api 后边的地址直接添加在后边而不会再携带api了 

当然这样的方式好像并不怎么直观所以我本人是更加偏向于后边这种方式的

• 重写url

这种方式就有点类似于webpack的解决方式了，只是平台不同了而已

　　　　location ^~/api/{
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Credentials true;
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
          rewrite  ^/api/(.*)$ /$1 break;
          proxy_pass http://fvs-web-server;
        }

这样的写的话就不需要在proxy_pass转发的路径后边写/了，因为在上一句的rewrite中已经吧url中api以后的路径单独取出来，并且重写了。

 

还有一点要注意的是 location 后边的路径类似于正则但也不是完全是正则，而rewrite后边的一定是正则，不要搞混了。我就是在写rewrite里边正则的时候直接把location后边匹配规则给抄了下来，整整两个小时啊，找不到问题，后来出去冷静了一下才看到(主要是那个"~"，正则里边没有这个的)