vue解决跨域问题(Vue-CLI)

2022年05月10日 阅读数:8
这篇文章主要向大家介绍vue解决跨域问题(Vue-CLI),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1. 建立vue.config.js文件;

打开项目,在vue项目的根目录下建立vue.config.js文件。javascript


2.配置vue.config.js文件;

module.exports = {
    devServer: {
        proxy: {
            '/api': {                              //须要代理的接口
                target: 'http://39.98.***.211',    //目标服务器
                changeOrigin: true,                //是否跨域
                pathRewrite: { '^/api': 'api' },   //重写
            },
        },
    },
}

举一个栗子🌰:我须要访问的接口是:http://32.88.***.818/api/abb,123 ,"/api"是一个标识,告诉它只代理接口里面有 "/api" 这个字段的接口,个人目标服务器http://32.88.***.818,即target定义的,pathRewrite重写'^/api': '/api' 就是在代理是时候使用 /api 代理。前端


3.调用接口。

  • 第一种状况,重写值为自身(pathRewrite: { '^/api': 'api' })
this.axios.get('/api/abb').then((res)=>{
    console.log(res)
})
  • 第二种状况,重写值为空(pathRewrite: { '^/api': ' ' })vue

this.axios.get('/api/api/abb').then((res)=>{
    console.log(res)
})

注:此方法只适用于本地开发。如发布到生产环境接口与前端在不一样域,需服务器配置代理。

  • 配置代理中 module.exports 是什么意思?

   module.exports 对象是由模块系统建立的。在咱们本身写模块的时候,须要在模块最后写好模块接口,声明这个模块对外暴露什么内容,module.exports 提供了暴露接口的方法。java

  • 配置代理中 devServer 是什么意思?

     浏览器若是须要开发某些特定功能,须要https浏览器才会给予功能权限, 则开发时咱们须要在https环境 下面是配置一个webpack devServer的https环境。webpack

  •  配置代理中 proxy 是什么意思

     proxy 也就是代理,能够帮助咱们完成不少事情,例如对数据的处理,对构造函数的处理,对数据的验证,说白了,在目标对象以前架设一层“拦截”,外界对该对象的访问,都必须先经过这层拦截,所以提供了一种机制,能够对外界的访问进行过滤和改写。ios