什么是跨域?
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。
跨域解决方法
通过jsonp跨域
前端页面
<script>
function test(data){
console.log(data)
}
</script>
<!-- <script src="./06000.js"></script> -->
<script src="http://localhost:3000/test"></script>
node.js
const http = require("http");
const { read } = require("fs");
const server = http.createServer();
const url = require("url")
const querystring = require("querystring")
server.on("request",(req,res)=>{
let pathname = url.parse(req.url).pathname;
let qs = querystring.parse(req.url.split("?")[1])
if(req.url == "/test" && req.method =="GET"){
const data = {
state: "200",
data: [{
name: "张三",
age: 10
}, {
name: "李四",
age: 12
}]
}
let datastr = JSON.stringify(data);
res.end(`test(${datastr})`)
}else if(pathname == "/jsonp" && req.method == "GET" && qs.callback){
console.log(123)
const data = {
state: "200",
data: [{
name: "张三",
age: 10
}, {
name: "李四",
age: 12
}]
}
let datastr = JSON.stringify(data);
res.end(qs.callback + "(" + datastr + ")")
}
})
server.listen(3000)
没有解决跨越
解决跨域之后
设置请求头
node.js中原生
res.setHeader("Access-Control-Allow-Origin","*");
res.setHeader("Access-Control-Allow-Methods","DELETE,PUT,GET,POST,OPTIONS")
引用express
app.all("*",(req,res,next)=>{
res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Methods","DELETE,PUT,GET,POST,OPTIONS")
next()
})
没有解决
解决之后
服务器解决
服务器端对于CORS的支持,主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
<?php 2 header("Access-Control-Allow-Origin:*");