vue

vue-cli怎么解决跨域的问题?

发布于 2021-01-11 17:03:04
关注者
0
被浏览
412
4 个回答
  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    vue-cli 主要在本地通过本地服务器拦截转发请求的模式解决跨域问题。

    步骤:

    1. config中设置proxy,这步决定哪种命名规则(比如'/abc/'开头的请求)的请求将被拦截(个人以为是通过改造XMLHttpRequest对象)到本地跨域服务器
    2. 本地服务器转发请求到目标服务器
    3. 本地服务器设置允许跨域的headers,然后返回结果,从而解决跨域

    跨域问题,除了单机修改浏览器配置外,都是服务器端配合进行解决。

  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    在根目录下新建:vue.config.js注意名不能错误,然后里面配置
    module.exports = {
    devServer: {
    proxy: {
    //配置跨域
    '/api': {
    target: '跨域url',
    ws: true,
    changOrigin: true
    // pathRewrite: {
    // '^/api': ''
    // }
    }
    }
    }
    }

  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    vue-cli无法解决跨域问题。真正解决跨域问的是webpack。只不过vue-cli3.0将webpack的配置继承到了vue.config.js中,才给初学者造成了vue-cli可以解决跨域的错觉。
    与在webpack.config.js中配置跨域一样,在vue.config.js中的devServer:{proxy:{}}字段可以编写跨域配置。
    具体的配置写法webpack文档写的很清楚。

知识点
面圈网VIP题库

面圈网VIP题库全新上线,海量真题题库资源。 90大类考试,超10万份考试真题开放下载啦

去下载看看