解决跨域的三种方法
解决跨域的三种方法
一.为什么会产生跨域问题?
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。
当一个请求的url的协议、域名、端口三者只要有一个与当前页面的url不同则会出现跨域问题
二.解决跨域的方式
2.1在服务端设置请求头,一般都是用于项目测试阶段。
Access-Control-Allow-Credentials属性代表后端允许发送Cookie
Access-Control-Allow-Origin属性代表允许访问的域(协议+域名+端口)如果设置为*代表允许全部访问
Access-Control-Allow-Methods属性代表允许请求的方式
前端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>请求</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
$("button").click(()=>{
$.ajax({
url : "http://localhost:8081/getData",
type : "get",
success(data){
console.log(data)
}
})
})
</script>
</body>
</html>
Node.js后台:
var http = require('http');
http.createServer(function(request, response) {
response.writeHead(200, {
'Access-Control-Allow-Credentials': 'true', // 后端允许发送Cookie
'Access-Control-Allow-Origin': '*', // 允许访问的域(协议+域名+端口)
'Access-Control-Allow-Methods': "POST,GET,DELETE,PUT,OPTIONS" // 允许请求方式用着五种
})
if (request.url == "/getData") {
const data = {
status: "ok",
data: [{
name: '张三',
age: 10
},
{
name: '张三',
age: 10
},
{
name: '张三',
age: 10
}
]
}
response.end(JSON.stringify(data))
}
}).listen(8081,function(){
console.log("服务启动成功");
});
2.2JSONP
JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
核心思想:网页通过添加一个< script >元素,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。JSONP是解决跨域的方法之一,它与AJAX并无任何关联。
2.2.1原生JSONP
了解了JSONP的核心思想我们来写一个简单的JSONP
前端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function json(data){
console.log(data)
}
</script>
<script src="http://localhost:3000/jsonp"></script>
</body>
</html>
Node.js后台
const http = require("http")
const fs = require("fs")
const url = require("url")
const server = http.createServer()
server.on("request",(req,res)=>{
const urlObj = url.parse(req.url,true)
const query = urlObj.query
const pathname = urlObj.pathname
// console.log(query)
// console.log(req.url)
if(pathname == "/test" && req.method == "GET"){
res.end("test({'name':'jack'})")
}else if(pathname == "/jsonp" && req.method == "GET"){
const data = {
status : "ok",
data : [
{
name : '张三',
age : 10
},
{
name : '张三',
age : 10
},
{
name : '张三',
age : 10
}
]
}
res.writeHead(200,{
"content-type" : "application/json;charset=utf8"
})
let datastr = JSON.stringify(data)
console.log(query.callback)
res.end(query.callback + "(" + datastr +")")
}
})
server.listen(3000)
2.2.2JQuery中的JSONP
众所周知在JQuery中的AJAX只要将dataType改成 "jsonp"类型就能使用JSONP来实现客户端与服务端之间通信,所以在面试当中经常会被问到,JSONP到底属不属于AJAX,小伙伴们回答这个问题的时候一定要坚定,JSONP与AJAX没有任何关系。
JQuery中的AJAX就是将原生的JSONP方法封装在了自身当中,其实两者之间没有任何关系。
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
// 原生的JSONP方法
function addScript(src){
var script = document.createElement("script")
script.src = src;
document.body.appendChild(script)
}
window.onload = function(){
addScript("http://localhost:3000/jsonp?callback=abc")
}
function abc(data){
console.log(data)
}
// jquery中的jsonp 就是把上面的代码封装在ajax工具方法中
$.ajax({
type : "GET",
dataType : "jsonp",
url : "http://localhost:3000/jsonp",
success : function(data){
console.log(data)
}
})
</script>
</body>
</html>
Node.js后台
const http = require("http")
const fs = require("fs")
const url = require("url")
const server = http.createServer()
server.on("request",(req,res)=>{
const urlObj = url.parse(req.url,true)
const query = urlObj.query
const pathname = urlObj.pathname
// console.log(query)
// console.log(req.url)
if(pathname == "/test" && req.method == "GET"){
res.end("test({'name':'jack'})")
}else if(pathname == "/jsonp" && req.method == "GET"){
const data = {
status : "ok",
data : [
{
name : '张三',
age : 10
},
{
name : '张三',
age : 10
},
{
name : '张三',
age : 10
}
]
}
res.writeHead(200,{
"content-type" : "application/json;charset=utf8"
})
let datastr = JSON.stringify(data)
console.log(query.callback)
res.end(query.callback + "(" + datastr +")")
}
})
server.listen(3000)
为啥反复说JSONP与AJAX没有任何关系呢?
下图是用JSONP向服务端发送的请求,type联类型为scrpt,这与JSONP的核心思想相对应。
下图是用AJAX向服务端发送的请求,它的type类型为一个xhr对象,AJAX的源码就是先创建一个xhr的对象,然后发送请求,所以JSONP与AJAX没有任何关系,只是AJAX封装了JSONP。
2.3代理服务器
这也是解决跨域一种方法之一,这个暂时留到下次再讲
更多推荐
所有评论(0)