前端八股文

最新推荐文章于 2022-09-01 10:36:18 发布

jasmine_qiqi

最新推荐文章于 2022-09-01 10:36:18 发布

阅读量485

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45065754/article/details/123747193

版权

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>