当我们谈跨域的时候,我们谈些什么

关于域名和请求

客户端在加载资源时,会从服务端请求资源。而具体请求的是哪个资源,则是由域名 指示的。

域名

一个域名主要是由三部分组成的,即——协议,域名,端口号(这三者合起来被称为域)。这三者将指示出一个唯一的服务器主机。换句话说,如果协议,域名,端口号一致,那么我们称其为同域

关于跨域请求

其定义是:当前发起请求的域与该请求指向的资源所在的域不一样。
浏览器基于安全问题,会限制这种请求。具体一点来说,请求会被发送至服务器,而服务器也会做出回应,但浏览器会拦截这次回应。

关于跨域请求的安全问题

CSRF攻击

CSRF(Cross-site request forgery),即跨站请求伪造。
如果没有跨域限制,当你登录了A网站,本地将会存储一个A网站相关的Cookie,而浏览器也会维护这个Session会话。如果你在没有登出的时候,就访问了B网站,B网站则可以通过这个Cookie来访问A网站的资源,从而造成信息泄露或是财产损失。、
简单来说,服务器仅识别身份验证信息,在上面的例子里,就是Cookie。如果不将网站和服务器限制为同源的,那么任意网站都将可以使用这个身份验证信息来获取服务器的资源。从服务器的角度看过去,若没有做特殊限制,所有具有正确的身份验证信息的请求都是合法的。
你可以通过[这篇文章]详细了解CSRF攻击。

同源策略

  • DOM层面:来自不同源的 Document 对象或 JS 脚本将不能读取或是设置当前 Document 对象的某些属性
  • Cookie与XMLHttprequest层面:拦截Ajax发起跨域HTTP请求的回复,同时Ajax请求不可懈怠与本网站不同源的Cookie
  • 同源策略的非绝对性:<script> <img> <iframe> <link> <video> <audio> 等带有src 属性的标签可以从不同的域加载和执行资源
  • 其他插件的同源策略:flash、java applet、silverlight、googlegears等浏览器加载的第三方插件会有各自的同源策略,但它们不同于浏览器原生的同源策略

跨域解决方法

配置 proxyTable

  • 背景:在本地开发时,Vue页面是类似于:http://localhost:8080 这样的访问页面,而接口如果部署在了服务器上,则会变成 http://xxx.com/.../... 这种的,直接使用则会存在跨域的请求。

进入 config/index.js 文件,按如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
dev: {

// 静态资源文件夹
assetsSubDirectory: 'static',

// 发布路径
assetsPublicPath: '/'

// 代理配置表
proxyTable: {
'/api': {
target: 'http://xxxxx.com', // 接口的域名
// secure: false, // https则删除注释
changeOrigin: true, // 切换源
pathRewrite: {
'^/api': ''
}
}
}
}
原理

vue-cli 使用 http-proxy-middleware 中间件来转发请求。更进一步的说,是当运行Vue项目的时候,会配置启动一个node服务,这个服务有两个作用:一,静态文件服务,以便于访问到本地的静态文件,同时监听文件变动。二,启动一个http代理,所有请求会被发送至这个代理A,然后由代理A转发至你的目标服务器B。而跨域是浏览器禁止的,服务器端不会禁止。

在浏览器端如果允许跨域,则会导致B网站获取到A网站的敏感信息。而服务器只能有自己网站的状态信息,所以没必要禁止跨域。