如果两个 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里面就可以了。
标签: 跨域
文章来源:
前端这点事
版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。
还木有评论哦,快来抢沙发吧~