面试常问的跨域的三种解决方案

“持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情”

为什么会出现跨域?

• 当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域

如下:当前页面url 被请求页面url 是否跨域 原因

[http://www.test.com/](https://link.zhihu.com/?target=http%3A//www.test.com/) 
[http://www.test.com/index.html](https://link.zhihu.com/?target=http%3A//www.test.com/index.html) 

否 同源（协议、域名、端口号相同）

[http://www.test.com/](https://link.zhihu.com/?target=http%3A//www.test.com/) 
[https://www.test.com/index.html](https://link.zhihu.com/?target=https%3A//www.test.com/index.html)

跨域 协议不同（http/https）

[http://www.test.com/](https://link.zhihu.com/?target=http%3A//www.test.com/) 
[(https://link.zhihu.com/?target=http%3A//www.baidu.com/) ]

跨域 主域名不同（test/baidu）

[http://www.test.com/](https://link.zhihu.com/?target=http%3A//www.test.com/) 
[http://blog.test.com/](https://link.zhihu.com/?target=http%3A//blog.test.com/)

跨域 子域名不同（www/blog）

[http://www.test.com:8080/](https://link.zhihu.com/?target=http%3A//www.test.com%3A8080/) 
[http://www.test.com:7001/](https://link.zhihu.com/?target=http%3A//www.test.com%3A7001/)

跨域 端口号不同（8080/7001）
 

说白了就是不同源的ajax请求就会形成跨域

发现跨域怎么解决呢?

1. jsonp方式

缺点: 只发送get请求 不能发送post请求

原理: 动态的创建script标签,添加src属性(但是这个请求是异步的),需要我们在页面声明一个函数,后端(服务器端)调用,把数据作为函数返 回给我们。

2.cors

原理:在响应头中添加 Access-Control-Allow-Origin:*

3.反向代理

原理: 服务器与服务器之间不存在跨域,可以相互同信--在vue.config.js中做以下配置

devServer:{
proxy: {
      /* 它会自动匹配路径中是否包含api,包含走target,它会把axios的本地路径偷偷替换成目标路径
          http://localhost:8888/api/sys/login  => http://ihrm-java.itheima.net/api/sys/login
         
         不包含api的话,它会走pathRewrite,用''空字符串替换/api
          http://localhost:8888/api/sys/login  =>http://ihrm-java.itheima.net/sys/login
      */
      // '/api': {
      //   // 目标路径,
      //   target: 'http://ihrm-java.itheima.net',
      //   // 路径重写
      //   pathRewrite: {
      //     '^/api': ''
      //   }
      // }
  }