什么是跨域、为什么要跨域、怎么解决跨域

1.什么是跨域？
要了解什么是跨域，我们先说一下同源的概念。同源，是指协议、域名、端口都相同。

例如：http://192.168.0.1:8080与https://192.168.3.1:8080不是同源，因为协议不同，个冒号前面的为协议，中间的为域名，第二个冒号后面的为端口，只要满足有一处不同，则就不是同源。

所谓跨域就是从 A 向 B 发请求，如若他们的地址协议、域名、端口都不相同，直接访问就会造成跨域问题，跨域是非常常见的现象！请求是跨域的但并不一定会报错，普通的图片请求。css文件请求是不会报错的。报错的条件是浏览器的同源策略，且发送Ajax请求，跨域是客户端问题。

2.为什么要跨域？
为了安全起见，浏览器设置了同源策略，当页面执行脚本的时候，浏览器会检查访问的资源是否同源，如果不是，就会报错。

3.如何解决跨域？
（1）JSONP
利用的是 script 标签 src 属性请求 js 无跨域问题，但具有局限性，只能发送 get 请求

（2）CORS
当请求违反了同源策略，就在请求头添加 Access-Control-Allow-Origin 属性，浏览器会判断响应中 Access-Control-Allow-Origin 值是否和当前的地址相同，匹配成功后才会做响应处理，否则继续报错。缺点是会忽略cookie，而且对浏览器版本有一定的要求

（3）nginx反向代理接口跨域
可以将前端项目部署到和接口同源的当前本地的服务器上。在vue.config.js 中进行代理配置，假设当我访问 http://localhost:9528/api/login 时会转换为间接访问 http://localhost:3000/api/login

devServer: {
    // 其他代码省略。。。。。
    
    // 代理配置
    proxy: {
      // 代理服务器，当请求的网址是http://localhost:3000的时候，会转成http://192.168.80.115:3000
      // /api 是 看接口文档所写的，每当访问本地的/api接口时，会转化为访问真实的服务器
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }

（4）web sockets
它是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。只有在支持web socket协议的服务器上才能正常工作。

相关推荐：

源码下载