一、前言

最近做了一个云服务相关的项目，整个系统架构：前后端彻底分离，前端采用Vue.js开发，后端采用Java开发，前后端通过接口耦合。笔者负责前端和部分后端的开发，亲身经历了前端的跨域问题，并完美解决，下面介绍解决方案。

二、什么是跨域问题

浏览器对javascript同源策略的限制，导致a.cn不能访问b.cn的接口和数据，因为a.cn和b.cn不同源。

• 什么是同源？
  同域名+同端口+同协议
  例子：

#协议跨域
http://a.tc.com访问https://a.tc.com；
#端口跨域
http://a.tc.com:1060访问http://a.tc.com:60；
#域名跨域
http://a.tc.com访问http://b.tc.com；

• 跨域错误提示

Access-Control-Allow-Origin

一般都会出现上述字样。

三、解决方案

分两种情况，一种是针对开发阶段，另一种是针对生产阶段。

3.1 开发阶段

在config目录下，修改index.js文件：

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    
    proxyTable: {
      '/svr1': {
        target: 'http://api.tc.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/svr1': '/svr1'
        }
      },
      proxyTable: {
      '/svr2': {
        target: 'http://ab.tc.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/svr2': '/svr2'
        }
      },

proxyTable下的srv1和srv2是后台服务名。

3.2 生产阶段

• 3.2.1 使用nginx代理：
  除了3.1章节介绍的在前端工程配置文件里配置外，还需要在部署vue静态资源文件时，在nginx.conf配置文件中加上后台服务的地址和端口：

 server {
        listen       8086;   # 前端监听端口
        server_name  localhost;
        root /usr/vuejs/nginx/;  #首页地址
        index index.html;         #首页
      
	location / {
        }        
location ~^/usersrv[/\w*]*$ {
           proxy_pass http://192.168.10.12:3000; // 服务地址+端口
 }

说明：
最后的配置是关键，意思是：当请求调用到8086端口，且url中含有“usersrv”时，跳转到后台服务地址 http://192.168.10.12:3000。
参考完整nginx.conf:

worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
 
    server {
        listen       8086;   # 前端监听端口
        server_name  localhost;
        root /usr/vuejs/nginx/;  #首页地址
        index index.html;         #首页
      
	location / {
        }        
	location ~^/svr1[/\w*]*$ {
           proxy_pass http://172.2.8.186:8089;
        }
	location ~^/svr2[/\w*]*$ {
           proxy_pass http://172.2.8.186:8088;
        }
    }
}

说明：
svr1：服务名称；
svr2：服务名称；
举例：假设前端部署在172.2.8.186上，访问前端主页：

172.2.8.186:8086/index.html

前端访问后台服务接口方式：

172.2.8.186:8089/svr1/user/getToken
172.2.8.186:8088/svr2/menu/getMenuList

四、尾声

可能还有其他方法解决vue跨域问题，暂时不作研究。