Vue项目在开发环境跨域和生成环境部署跨域问题解决

一.在dev环境下的跨域问题解决

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

axios.defaults.baseURL = '/api';

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

dev: {

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

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

3.进入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"
  }

二.在生产环境下的跨域问题解决

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

axios.defaults.baseURL = '/api';

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

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/double-c',
    ...
}

3.build项目,将生成的dist文件夹里的文件,复制到tomcat服务器的webapps下的项目目录下,这里我的项目目录是double-c

此时已经可以通过tomcat访问项目了,但是banner显示不出来,由于没有解决跨域问题

4.进入nginx/conf目录,新建文件夹myconfig,以及double-c.conf文件

5.编辑double-c.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;
        }
}

6.进入nginx/conf/nginx.conf配置文件,导入上面的double-c.conf配置

http {
    ...

    include myconfig/*.conf;

    ...
}

7.此时已可以通过nginx代理访问tomcat下的项目,并且解决了跨域问题(192.168.25.128就是配置里的localhost)