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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐