跨域问题以及解决跨域问题的vue-cli解决方案

跨域问题

写项目前要问后端,接口支持跨域吗? 支持就不会出现问题,不支持就需要解决跨域问题

1.如何判断一个浏览器的请求是否跨域？

在A地址（发起请求的页面地址）向B地址（要请求的目标页面地址）发起请求时，

如果A地址和B地址在：协议域名端口不全相同，则说明请求是跨域的；

跨域请求在浏览器中是非常常见的现象！

2. 什么时候会发生跨域报错

请求是跨域的，并不一定会报错。普通的图片请求，css文件请求是不会报错的

跨域请求出现错误的条件： 浏览器同源策略 && 请求类型是ajax类型

3 如何解决接口不处理跨域问题的问题?

前端用JSONP方式去发请求（jsonp不是ajax请求）
后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错
代理转发

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BXnwwCeQ-1671799191729)(C:\Users\28132\AppData\Roaming\Typora\typora-user-images\1671696030766.png)]$

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

在这里插入图片描述

思路：

vue-cli脚手架工具在启动时，会开启一个前端项目的服务器。在同一局域网中的用户都可以通过ip地址来访问。

vue-cli脚手架支持配置一个代理：将指定的类型请求，转发到目标服务器。

2.1 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求

2.2 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

第一步:在vue.config.js配置文件中,在devServe中添加proxy代理

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