跨域
跨域
原来请求的目标URL和所在网页的URL的协议、域名、端口有一个不同，就算是跨域
跨域时，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了
Access to XMLHttpRequest at 'http://192.168.2.100:8888/ajax02/05.php'
from origin 'http://127.0.0.1:8888' has been blocked by CORS
policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Access-Cotrol-Allow-Origin 这是典型的跨域报错
、、这三个标签 ，都允许跨域加载资源
同源策源
同源政策由 Netscape 公司引入浏览器，所有浏览器都实行这个政策
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
-
如果没有同源策略
某网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取某网站的 Cookie，会发生什么？ Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是， Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，进行窃取信息 -
同源策略的限制内容
Cookie、LocalStorage等存储性内容DOM节点- ajax请求发送之后，结果被浏览器给拦截了
CROS
CORS 是一个 W3C 标准，跨域资源共享（Cross-Origin Resource Sharing），它允许浏览器向跨源服务器，发出XMLHttpRequest请求，跨域机制是阻止了数据的跨域获取，而不是阻止请求发送
需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于 IE10，支持所有类型的HTTP请求
服务端设置 Access-Control-Allow-Origin 可开启 CORS。 该属性表示哪些域名可访问资源，如果设置*则表示所有网站都可访问资源
Access-Control-Allow-Origin: * //所有网站都可以访问资源
Access-Control-Allow-Methods: POST, GET, OPTIONS //设置请求方式
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type //设置请求头
Content-Type 只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain
JSONP
JSONP 是服务器与客户端跨源通信的常用方法
JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据，但只支持GET请求，不是很安全，可能会遭到XSS攻击
利用 script 标签可跨域的特点，在跨域脚本中可直接回调当前脚本的函数
原生js
let script = document createElement('script');
script.src = "http://localhost:8000/index?uname=yaya&callback=fn";
document.body.appendChild(script);
用express模块
const express = require('express');
const app = express();
app.get('/index', (req, res) => {
let {
uname, callback } = req.query;
res.send(`${
callback}('丫丫')`);
})
app.listen(8000);
jQuery的jsonp形式
$.ajax(){
url: 'http://localhost:8000/index?uname=yaya&callback=fn',
type: 'GET',
dataType: 'jsonp',
jsonpCallback: 'fn',
jsonp: 'callback', //用来获取jsonp回调函数名的参数名
success: (data)=>{
console.log(data);
}
}
代理
代理跨域的主要方式是利用服务器请求服务器的方式避过跨域问题来实现， 过程：浏览器 —> 代理服务器 —> 目标服务器.
一个位于客户端和目标服务器之间的服务器，为了从目标服务器获取内容，客户端向代理发送一个请求，并指定目标服务器，然后代理向目标服务器转交请求并获取内容返回给客户端