浏览器跨域-原因及解决方案

跨域请求在浏览器中是非常常见的现象,如何判断一个浏览器的请求是否跨域？

跨域请求出现错误的条件： 不满足浏览器同源策略  同时  请求类型是ajax类型;

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

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

解决方案

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

今天要分享的是第三者,代理转发:

 vue-cli中集成的跨域解决方案

思路：

1. vue-cli脚手架工具在启动时，会开启一个前端项目的服务器。在同一局域网中的用户都可以通过ip地址来访问。
2. vue-cli脚手架支持配置一个代理： 将指定的类型请求，转发到目标服务器。

代理服务器与前端后端的关系:

1. 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
2. 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过服务器代理做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

vue-cli解决跨域配置说明

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

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

接下来去掉axios基地址

重启项目，验证结果

1. 修改了配置文件，一定要重启前端项目
2. 再次测试登陆接口，我们发现：跨域问题已经解决了

小结

1. vue-cli集成了跨域代理功能------ 只能用在开发阶段。
2. vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。

特别强调：

axios的基地址baseUrl必须是相对地址，而不能是绝对地址

 

跨域代理100问

1. 上班之后，接口跨域找谁解决？ 答：后端。
2. devSer中的proxy能不能在上线之后使用？ 答：不能。因为打包之后得到的就是普通的js，html文件，不再享受webpack server的服务了。
3. 场景：前端项目的服务器的地址：http://localhost:3003，它访问的接口是http://www.abc.com/api/getinfo。

1. 问：如果这个接口处理了跨域，问，我们需要做代理吗？ 答：不需要。此时发ajax请求在network中看到是: http://www.abc.com/api/getinfo
2. 问: 如果这个接口没有处理跨域，需要我们做代理。做了代理之后，network中看到的地址是：http://localhost:3003/api/getinfo

配置方法二:

配置本地代理，将请求指向同事的服务器地址:

// 代理配置
proxy: {
  // 如果请求地址以/api打头,就出触发代理机制
  // http://localhost:9528/api/login -> http://localhost:3000/api/login
  '/api': {
    target: 'http://192.168.66.104:3000' // 这个地址可以是同事的服务器地址
  }
}