Vue+nginx+tomcat配置跨域

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的

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在使用 Vue Router 时,如果我们的应用需要在部署时不是根路径,而是一个非根路径下运行,可以通过以下步骤进行配置。 首先,在项目的 `vue.config.js` 文件中进行配置。如果没有该文件,可以在项目根目录下创建,并添加以下内容: ```javascript module.exports = { publicPath: '/your-sub-path-name/' // 替换为你的非根路径名称 } ``` 然后,在使用 Vue Router 的时候,需要修改路由配置。假设我们有一个路由配置文件 `routes.js`,其中定义了路由路径: ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) export default new Router({ mode: 'history', base: '/your-sub-path-name/', // 替换为你的非根路径名称 routes: [ { path: '/', name: 'home', component: Home }, // 其他路由配置 ] }) ``` 在这个例子中,我们使用了 `base` 字段来指定非根路径的名称。这会告诉 Vue Router 在生成路由链接时,在路径前面添加正确的路径前缀。 接下来,我们需要配置 Nginx 服务器来支持非根路径。打开 Nginx 配置文件,一般是 `/etc/nginx/nginx.conf` 或 `/etc/nginx/conf.d/default.conf`,找到 `location` 配置部分,添加以下内容: ```nginx location /your-sub-path-name/ { # 替换为你的非根路径名称 alias /your-project-path/dist/; # 替换为你的项目部署路径,注意最后的斜杠 try_files $uri $uri/ /your-sub-path-name/index.html; # 替换为你的非根路径名称 } ``` 在这个例子中,我们使用了 `alias` 字段来指定项目所在的路径,`try_files` 字段用于处理路由重定向,确保正确的路由能被找到。 最后,重新启动 Nginx 服务器,让配置生效。 这样,我们就成功地配置Vue Router 和 Nginx 来支持非根路径了。现在我们的应用可以在非根路径下运行了。记得根据实际情况替换配置中的相应字段。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值