震惊!跨域问题尽然能这样解决。。。

91 阅读1分钟

什么是跨域?

浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域 域名:

主域名不同 www.baidu.com/index.html -->www.sina.com/test.js
子域名不同 www.666.baidu.com/index.html -->www.555.baidu.com/test.js
域名和域名ip www.baidu.com/index.html -->http://180.149.132.47/test.js

端口:  www.baidu.com:8080/index.html–… www.baidu.com:8081/test.js
协议:  www.baidu.com:8080/index.html–… www.baidu.com:8080/test.js

备注:  1、端口和协议的不同,只能通过后台来解决  2、localhost和127.0.0.1虽然都指向本机,但也属于跨域

跨域限制

1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

2、无法接触非同源网页的 DOM

3、无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)

如何解决跨域?

1.JSONP

2. CORS(跨域资源共享)

  • 一般都是后台设置

3.代理服务器 (这里讲述的是在vue中实现)

思路:

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

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

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

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

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

image.png