Vue怎么实现跨域

156 阅读1分钟

(1)什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指 协议端口域名。只要这三个中有一个不同就是跨域

image.png

(2)使用Vue-cli脚手架搭建项目时proxy代理来解决跨域问题

打开vue.config.jsdevServer中填写如下代码:

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 代理配置
    proxy: {
      // 如果请求地址以/api打头,就出触发代理机制
      // http://localhost:9588/api/login -> http://localhost:3000/api/login
      '/api': {
            target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }
  }

(3)使用cors (跨域资源共享)

前端设置:

前端 Vue 设置 axios 允许跨域携带 cookie (默认是不带cookie)
axios.defaults.withCredentials = true