什么是跨域?怎么处理前后端分离遇到的跨域?

前端这点事 200 0

如果两个 URL 的 protocol、port (en-US) (如果有指定的话)和 host 都相同的话,则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”,或者直接是 “元组”。(“元组” 是指一组项目构成的整体,双重/三重/四重/五重/等的通用形式)。

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:


URL结果原因
http://store.company.com/dir2/other.html同源只有路径不同
http://store.company.com/dir/inner/another.html同源只有路径不同
https://store.company.com/secure.html失败协议不同
http://store.company.com:81/dir/etc.html失败端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html失败主机不同



下图就是产生跨域的提示:

什么是跨域?怎么处理前后端分离遇到的跨域?-第1张图片-前端这点事

那么我们开发中,如何处理这个问题呢?

可以通过反向代理去设置。我们可以简单的开启一个node服务,代码如下:

<script>
var express = require('express');
var proxy = require('http-proxy-middleware');

var app = express();

app.use('/api', proxy({ target: 'http://www.example.org', changeOrigin: true }));
app.listen(3000);
</script>

这样的话,我们访问/api的话,就相当于访问到了http://www.example.org

这是前端通过写node服务解决的,也可以通过让服务端去设置,拿node服务端代码看:

res.header('Access-Control-Allow-Origin', '你的项目地址,用*将会带来安全问题');
res.header('Access-Control-Allow-Headers', '*');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');

当然这样设置,就是允许全部method、地址去访问,这样不太安全,所以一般我们设置自己的域名地址到allow-origin里面就可以了。

标签: 跨域

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~