使用vue-cli开发时跨域问题

Posted 大泽队长

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue-cli开发时跨域问题相关的知识,希望对你有一定的参考价值。

打开config文件夹下的index.js,配置proxyTable:

{
    ...
    dev:{
         ...
        
        proxyTable: {
             \'/api\': {
                    target: \'http://localhost\',
                    changeOrigin: true  // 必须,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
             }
        }      
    }
}

 

 

 

其中,taget是要访问的api的地址,配置完proxyTable后,若要访问\'http://localhost/api/books\',ajax里的url只需设为\'/api/books\'即可,webpack会帮你把‘/api’下的请求转发至\'http://localhost/api\'!

如果不想传递‘/api’ 到请求路径,可以这样配置:

{
    ...
    dev:{
         ...
        
        proxyTable: {
             \'/api\': {
                     target: \'http://localhost\',
                     changeOrigin: true,
                     pathRewrite: {"^/api" : ""}
             }
        }      
    }
}    

参考文档: webpack vue-cli

以上是关于使用vue-cli开发时跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

用webpack-dev-server开发时代理,决解开发时跨域问题

如何解决IE8下Ajax调用时跨域的问题

AJAX访问SpringBoot2.0时跨域问题

请求接口时跨域问题,前端解决方法

定义 Content-Type 时跨域 jQuery AJAX 失败

jQuery ajax调接口时跨域