Vue项目跨域的解决办法

 

                                            Vue项目中的跨域问题

 

一般我们的前端Vue项目中都会涉及到跨域的问题，在项目中访问web域名获取数据时无法正常获取，浏览器控制台会类似出现

跨域一般分两种情形：

 

• 开发环境跨域

项目使用的是axios请求网络,将baseUrl修改为/api (这里是使用webpack提供的代理功能将/api代理成目标接口host)

axios.defaults.baseURL = '/api';

进入config/index.js里,在dev下增加proxyTable配置,可以匹配到/api,将其代理成目标接口host

dev: {
 
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'xxxxxxxxxxxxx',//目标接口域名
        changeOrigin: true,//是否跨域
        pathRewrite: {
          '^/api': ''//重写接口,后面可以使用重写的新路径，一般不做更改
        }
      }
    }
}

此时已经解决了dev下的跨域问题。

进入package.json,在dev字段下增加 " --host 0.0.0.0 ",这样可以真机通过ip地址访问项目,进行调试

"scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config                                                 build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

 

---

• 生产环境跨域

同样将axios的baseURL修改为 /api, (生产环境下是使用nginx反向代理,将/api 代理成目标接口host).

axios.defaults.baseURL = '/api';

进入config/index.js里,在build下修改项目路径,将assetsPublicPath字段的 '/' 修改为 '/your_project_name' (名称和项目名称目录一致)

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/your_project_name',
    ...
}

build项目,将生成的dist文件夹里的文件,复制到tomcat服务器的webapps的项目目录下,我们这里结合nginx使用反向代理来解决。进入nginx/conf目录,新建文件夹your_project_name,以及our_project_name.conf文件

 

编辑your_project_name.conf配置文件,配置反向代理.

server {
        listen       83; #监听83端口，可以改成其他端口
        server_name  localhost; # 当前服务的域名(nginx所在服务器域名)
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            proxy_pass http://localhost:8080;#代理项目部署的地址(这里项目部署在了当前服务器tomcat上,端口8080)
            proxy_redirect default;
        }
 
		location /api { #添加访问目录为/api的代理配置,使以“/api”开头的地址都转到“http://192.168.1.111:8080”上
			rewrite  ^/api/(.*)$ /$1 break;
			proxy_pass   http://192.168.1.111:8080;
        }
}

接着进入nginx/conf/nginx.conf配置文件,导入上面的your_project_name.conf配置.

http {
    ...
 
    include myconfig/*.conf;
    ...
}

此时已可以通过nginx代理访问tomcat下的项目,并且解决了跨域问题.