两种解决跨域的方法

1、定义

1.1、浏览器同源（origin）策略：浏览器规定发送ajax请求时，只有相同域名的客户端和相同域名的服务端才能发送请求。 1.2、同源：.html在哪台服务器请求，数据也需要在哪台服务器请求。 1.3、报错：Access-Control-Allow-Origin不允许跨源头发送请求。 1.4、同源策略的本质：可以发送ajax请求，可以正常执行服务端的程序，也可以顺利返回正确的结果，但是，浏览器经过检查数据的来源，如果和当前网页的来源不一致，浏览器禁止使用此数据。

2、跨域的四种情况 2.1、域名不同

• www.a.com
• www.b.com

2.2、端口号不同

• www.a.com:3000
• www.a.com:5500

2.3、协议不同

• http://www.a.com
• https://www.a.com

2.4、域名和地址相互请求

• http://localhost
• http://127.0.0.1

3、可以跨域的标签

3.1、img 3.2、link 3.3、iframe 3.4、script

4、CORS（cross origin resource share）跨域

不要使用res.send(result);这句话包含了下面三句话，属于下面三句的简写，重写这三句话。

res.writeHead(localhost:3000); // 写信封封面 res.write(); // 写信的内容 res.end(); // 发送 

res.writeHead(200, { // 只针对某个地址实现跨域 // 'Access-Control-Allow-Origin': 'http://127.0.0.1:5500', // 所有请求都允许跨域 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json;charset=utf-8' }); res.write(JSON.stringify([value])); res.end(); 

5、JSONP（json with padding）跨域

这里的padding是填充。

方案一

客户端

<script src='http://127.0.0.1:8080'>weather})`; res.write(string); res.end(); // 问题：服务端将客户端执行的程序固定了， // 众口难调。 

方案二

客户端

<script> fonctiong show(data) { // alert(data); document.write(data); }; weather})`; res.write(string); res.end(); // 问题：服务端将函数名固定了， // 众口难调。 

方案三（请求时携带参数）

客户端

<script> fonctiong show(data) { // alert(data); document.write(data); };  // 不使用 express 框架 let fname = url.parse(req.url, true).query.fname; let weather = '晴 22-30℃'; let string = `${fname}(${weather})`; res.write(string); res.end(); }); // 问题：客户端的标签固定了。 // 需要动态点击请求时无法实现。 

方案四（请求时携带参数）

客户端

<button> // 注意：不要拷贝结束标签 $(`