Nginx解决Vue项目中跨域问题

开发环境下：

只需在Vue config 的index.js中配置  proxyTable即可。

  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/lottery/',
    proxyTable: {
      '/api':{
        target:'http://localhost:8088',
        changeOrigin: true,//是否跨域
        secure:false,
        pathRewrite:{
          '^/api':'/api'
        }
      }
    },//设置反向代理，解决跨域

 

 

生产环境下：

用到 Nginx tomcat

1、配置 Nginx 

使Nginx监听83端口  location里的配置是把监听过来的请求转发到对应的端口

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;
        }
}

 

2.配置Tomcat

把Vue打包后的 dist下的内容放到 WebApps下

 

访问的网址为  http://188.131.238.237:83/lottery/#/index Vue中写的端口号为Nginx的端口号