跨域

81 阅读1分钟

为什么会出现跨域?

当下,最流行的就是**前后分离项目,也就是前端项目后端接口并不在一个域名之下,那么前端项目访问后端接口必然存在跨域**的行为.

解决开发环境的跨域问题

开发环境的跨域,也就是在vue-cli脚手架环境下开发启动服务时,我们访问接口所遇到的跨域问题,vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,这就是vue-cli配置webpack的反向代理**

**vue.config.js**配置代理选项

  module.exports = {
 devServer: {
  // 省略前面的代码
  
     // 代理配置
    proxy: {
    // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
    // localhost:8888/api/abc  => 代理给另一个服务器
    // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 (行得通)
    // 本地的前端  =》 另外一个服务器发请求 (跨域 行不通)
    '/api': {
    target: 'www.baidu.com', // 我们要代理的地址
    changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
     // 路径重写
    pathRewrite: {
        // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
        '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就        需要这么做 
    }
   },
  }
 }
 }