Nginx解决Vue项目中跨域问题

最新推荐文章于 2024-10-08 02:10:34 发布

技术无产者

最新推荐文章于 2024-10-08 02:10:34 发布

阅读量2.8k

点赞数 3

分类专栏： # Vue.js

本文链接：https://blog.csdn.net/qq_39552268/article/details/89744033

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在Web端Vue项目开发过程中，跨域问题是不可避免的；在我参与的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的端口号