1、浏览器跨域问题
跨域是怎么产生的？
- 浏览器有一个安全机制，叫做同源策略，同源就是指（协议、域名、端口）都一致，如果任意一项不一致都是不同源。
- 简单地说，就是网页的url和你调用接口的url不是同一个地方的，浏览器觉得有安全风险，不想让你使用这个接口的数据。
跨域怎么解决？
- 1、在接口的服务器，修改响应头，把它赋值为*级，任何域都可以访问
server.js:
var express = require('express'); // 90端口的服务，将当前目录作为http服务 var app = express(); app.use(express.static(__dirname)); app.listen(90); // 91端口的服务，返回数据 var app2 = express(); //1、header app2.get("/", function (req, res) { res.header("Access-Control-Allow-Origin", "*"); res.send("你好！"); })
index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello!</h1> </body> <script> fetch("http://localhost:91/").then(res => res.text()).then(data => (alert(data))) </script> </html>
- 2、JSONP（注意：href和src去请求下来的js脚本、css文件和img图片都不存在跨域问题，只有通过Ajax请求下来的资源存在跨域问题。）
- 步骤：
- 1、先注册函数f
function f(data) { alert(data); }
- 2、写JS脚本标签
<script src="http://localhost:91?callback=f"></script>
- 3、url转到app2，解析里面的callback
app2.get("/", function (req, res) { var funcname = req.query.callback; res.send(funcname + "('你好')");// f('你好') })
server.js:
// 2、jsonp（注意：只有通过Ajax请求下来的资源存在跨域问题） var express = require('express'); // 90端口的服务，将当前目录作为http服务 var app = express(); app.use(express.static(__dirname)); app.listen(90); // 91端口的服务，返回数据 var app2 = express(); // 1、修改响应头 // app2.get("/", function (req, res) { // res.header("Access-Control-Allow-Origin", "*"); // res.send("你好！"); // }) // app2.listen(91); // 2、jsonp（注意：只有通过Ajax请求下来的资源存在跨域问题） app2.get("/", function (req, res) { var funcname = req.query.callback; res.send(funcname + "('你好')");// f('你好') }) app2.listen(91);
index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello!</h1> </body> <script> // fetch("http://localhost:91/").then(res => res.text()).then(data => (alert(data))) function f(data) { alert(data); } </script> <script src="http://localhost:91?callback=f"></script> </html>
