vue 跨域,本地去掉api前缀配置,和nginx去掉api前缀配置

本文介绍如何通过配置前端项目的proxyTable、本地接口前缀及nginx服务器来解决跨域问题,确保前后端接口调用正常。

1,跨域问题

在 config文件找到index.js,修改 proxyTable

proxyTable: {

      '/api/': { 

     //target: 'http://127.0.0.1:3001',// 设置你调用的接口域名和端口号

    //secure: false, // 如果是https接口,需要配置这个参数

    changeOrigin: true, //是否跨域

      pathRewrite: {

        //'^/api/': '' //将访问路径的/api/替换成’‘,后台服务不用加api了,但前端的请求地址还是要加/api/

       }

   }

},

在 config文件找到dev.env.js,加入以下代码

module.exports = {

NODE_ENV: '"development"',

ADMIN_SERVER: '"/api/"',

}

2.本地去掉后端接口api前缀配置,打开pathRewrite的注释即可

proxyTable: {

      '/api/': { 

     //target: 'http://127.0.0.1:3001',// 设置你调用的接口域名和端口号

    //secure: false, // 如果是https接口,需要配置这个参数

    changeOrigin: true, //是否跨域

      pathRewrite: {

        '^/api/': '' //将访问路径的/api/替换成’‘,后台服务不用加api了,但前端的请求地址还是要加/api/

       }

   }

},

3.nginx去掉api前缀配置

  server {
        listen       8081;    //监听8081端口
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root  /Users/xx/project;    //设置根路径
            index  index.html index.html;
        }

     location /api {        //匹配url中带有api的,并转发到http://localhost:8080/api
  rewrite  ^/api/(.*)$ /$1 break;         //利用正则进行匹配#去掉api前缀,$1是正则中的第一串,这样后端的接口也不需要带api了
  proxy_pass http://localhost:8080;      //转发的参数设定
}

另外看到一篇很更详情的博客,链接在下面

https://blog.csdn.net/qq_28352347/article/details/79511128

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值