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

前端这点事 2021年05月13日 15:56 629 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`	失败	主机不同

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

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

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

标签：跨域

本文地址： https://www.ltonus.com/JavaScript/cros.html

文章来源：前端这点事