跨域遇到的问题与解决方案

Hello, here is the blog of Wang Xiaobai welcome your arrival

你好,这里是王小白的博客 欢迎你的到来

前言: 可以说跨域是前端避不开的话题 我们会常常与他打交道 在这里 我总结几个问题 希望你们能 指出问题 哪里有做的不足的地方需要改进  我会努力 谢咯~!

1. 如何判断是否跨域呢 : 

    假设我们在 A 地址向 B地址 发起请求 此时 A 和 B 的请求地址 : 协议 域名 端口号  不全相同的情况下 则说明跨域。

2. 在跨域的情况不报错和报错的两种情况 : 

  (1)不报错的情况:  请求跨域了，并不一定会报错。普通的图片请求，css文件请求是不会报错的

  (2) 报错的情况: 浏览器同源策略 && 请求是ajax类型

3. 解决方案 : 

  1 前端不要用JSONP方式请求 

  2 后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错

  3 代理转发 : 通过配置vue-cli请求代理 解决 开发环境下的跨域问题 : 

 (3.1)在vue.config.js中配置devServer

 (3.2)确保基地址指向本地服务

vue-cli解决跨域配置说明  代码实现 :

在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。

module.exports = {
  devServer: {
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        '/api': {
          target: ' 我们要代理的真实接口地址' 
        }
      }
    }
  }
}

确保基地址指向本地服务 : 

在 .env.development 中修改

VUE_APP_BASE_API = '/api'   // 调用接口的url 地址 就可以省略 /api了