Vue+nginx+tomcat配置跨域

最新推荐文章于 2025-03-15 15:35:30 发布

原创最新推荐文章于 2025-03-15 15:35:30 发布 · 636 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nginx

前端专栏收录该内容

4 篇文章

订阅专栏

博客介绍了Vue代码请求在开发和生产环境的跨域配置。开发环境使用idea和webstorm，在vue.config.js中配置；生产环境使用tomcat和nginx，需在nginx.conf中配置，同时指出开发环境的devServer.proxy跨域配置不能用于tomcat。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nginx配置跨域

- 一、开发环境（idea+webstorm）跨域
- 二、生产环境（tomcat+nginx）跨域

vue中的代码请求：

//假定：this.api="api";
initList: function () {
      this.axios.post(this.api+'/xx/xxx/xxxx', this.qs.stringify({
        'pageNo': this.currentPage,
        'pageSize': this.pageSize
      })).then(res => {
        console.log('输出结果：', res);
      });
    },

一、开发环境（idea+webstorm）跨域

在vue.config.js中作以下配置：

devServer: {
        proxy: {
            '/api': {                                           //检测到地址中含有api的进行代理
                target: 'http://192.168.0.181:8081/web',        //代理到的地址
                changeOrigin: true,                             //允许跨域
                ws: true,
                pathRewrite: {
                    '^/api': ''                                 //是否需要将地址中的api进行处理替换
                }
            }
        }

二、生产环境（tomcat+nginx）跨域

this.api=“http://192.168.0.181:8082/api”;
需在nginx.conf中配置以下几处：

server {
    listen       8082;                                   //配置监听要访问的端口
    server_name  192.168.0.181;                          //服务器地址
	##配置跨域
    add_header Access-Control-Allow-Origin $http_origin; //配置nginx允许跨域
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
    #location / {
    #    root   html;
    #    index  index.html index.htm;
    #}
	#location / {
    #     try_files $uri $uri/ @router;
    #     index index.html;
    #}
	location /sjapi {
        proxy_pass   http://192.168.0.181:8081/web;     //代理地址，根据实际替换
    }
}

注意：开发环境的devServer.proxy跨域配置，是不能用于tomcat的