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

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

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

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

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

可以通过反向代理去设置。我们可以简单的开启一个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里面就可以了。

标签： 跨域

赏