跨域问题

何为跨域

同源策略

浏览器安全的基石是”同源政策”(same-origin policy)。它可以保证用户信息的安全,防止恶意的网站窃取数据。

“同源政策”包含了三个相同:

  • 协议相同
  • 域名相同
  • 端口相同

那么违反了该同源政策的即为跨域。

举个栗子:现有一个网址 http://www.example.com/dir/page.html,我们可以看出其协议是 http://,域名是 www.example.com,端口是 80(默认端口可以省略)。

1
2
3
4
* http://www.example.com/dir2/other.html:同源
* http://example.com/dir/other.html:不同源(域名不同)
* http://v2.www.example.com/dir/other.html:不同源(域名不同)
* http://www.example.com:81/dir/other.html:不同源(端口不同)

解决策略

服务器

Apache

对于 Apache 的服务器来说,需要使用 mod_headers 模块来激活HTTP头的设置,它默认是激活的。你只需要在Apache配置文件的 <Directory><Location><Files><VirtualHost> 的配置里加入以下内容即可:

1
Header set Access-Control-Allow-Origin *

Nginx

当然,你也可以用 Nginx 反向代理一下。

1
2
3
location /rest {
add_header Access-Control-Allow-Origin "*";
}

小结

总的来说,服务器端的解决策略是一致的,它们就是让服务器可接收你的前端地址。在上面的设置中,我们使用了 *, 这个表明服务器可接收任何来源的地址,当然,你也可以设置为只接收自己的。

Vue 中的解决方案

jsonp(前端通用)

JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网站要资料。

这个就不多详述了,每个框架的使用都不一样。(有兴趣的参见 参考资料3)

比如在 Vue 中,有 vue-resources 库,其中就有 jsonp 的方法,但是 vue-resources 似乎不更新了,所以不推荐使用。

vue-li(推荐!!!)

Vue.js 中,如果你是运用了 Vue-li 来构建项目的,那么恭喜你,Vue-li 自带一个非常方便的解决方案:proxyTable

Vue-li 构建的项目中,可以找到 Config 文件夹下的 index.js 的文件,其中有一个 proxyTable 属性。

那么我们可以这样做:

1
2
3
4
5
6
7
8
9
10
11
12
dev: {
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
target: 'http://xxxx.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
}

值得注意的是:在使用的时候,原来我们的地址是:http://xxxx.com/api/xx,现在只需要写 /api/xx 就可以了。

这个属性的设置是来源于插件 http-proxy-middleware

参考

  1. 浏览器同源政策及其规避方法 – 阮一峰
  2. 跨域资源共享 CORS 详解 – 阮一峰
  3. 详解js跨域问题
  4. Vue-cli proxyTable 解决开发环境的跨域问题
文章目录
  1. 何为跨域
    1. 同源策略
  2. 解决策略
    1. 服务器
      1. Apache
      2. Nginx
      3. 小结
    2. Vue 中的解决方案
      1. jsonp(前端通用)
      2. vue-li(推荐!!!)
  3. 参考
|