要了解跨域,首先要了解什么是同源策略:
同源策略:
同源策略是浏览器的一种安全策略:指两个网址的协议、ip、端口号port 三者一致,即代表同源,也就是属于同一服务器。
比如:
(1)http://www.baidu.com/index.html
http://www.baidu.com/news
以上两个网址属于同源,因为pathname不会参与同源的判断
(2)http://www.baidu.com/index.html
https://www.baidu.com/index.html
以上两个网址不同源,因为它们的协议不一样 ,一个是http协议,一个是https协议
(3)http://www.baidu.com/index.html
http://www.baidu.cn/index.html
以上两个网址不同源,因为它们的域名不一样
(4)http://www.baidu.com/index.html (假设域名DNS解析为:192.168.1.111:8081)
http://192.168.1.111:8081/index.html
这两者的网址是同源的
概念:
所谓跨域就是浏览器为了用户信息安全,当网页中有一个网络请求技术(AJAX),在进行网络请求时,请求的网址和当前页面的网址不属于同一台服务器,那么就会被拒绝接收服务器发送的数据信息。
router.js代码:
- var fs=require("fs")
- var url=require("url")
- var querysting=require("querystring")
- var mime=require("mime")
- let urls={}
- var http=require("http")
-
- let router=function(req,res){
- //这个函数每次用户访问时运行
- let pathname=url.parse(req.url).pathname
- fs.readFile(router.basepath+pathname,(err,data)=>{
- if(!err){
- res.setHeader("content-Type",mime.getType(pathname))
- res.end(data)
- }else{
- if(!urls[pathname]){res.end("404 not found-mymvc")}
- else{urls[pathname](req,res)}
- }
- })
- }
- router.static=function(path){
- this.basepath=path
- }
-
- router.get=function(url,cb){
- urls[url]=cb
- }
- router.basepath=__dirname+"/public"
- http.createServer(router).listen(8081)
- module.exports=router;
controller.js代码:
- module.exports={
- homegoods(req,res){
- var obj={data:[
- {title:"米饭",price:2,des:"好吃"},
- {title:"鱼香肉丝",price:20,des:"好吃"},
- {title:"水煮肉片",price:25,des:"好吃"}
- ]}
- var str=JSON.stringify(obj)
- res.setHeader("content-Type","text/json;charset=utf8")
- res.end(str)
- },
- car(req,res){
- var obj={data:[
- {title:"小面",price:18,des:"好吃",count:1},
- {title:"牛排",price:182,des:"好吃",count:1},
- {title:"宫保鸡丁",price:25,des:"好吃",count:2}
- ]}
- var str=JSON.stringify(obj)
- res.setHeader("content-Type","text/json;charset=utf8")
- res.end(str)
- }
- }
index.js文件:
- const controller = require("./controller.js")
- var router = require("./router.js")
-
- router.get("/homegoods",controller.homegoods)
- router.get("/car",controller.car)
public文件夹中的index.html文件:
taobao --- home
-
- <button id="btn">点击使用ajax请求数据button>
-
- <script>
-
- var btn = document.querySelector("#btn")
- btn.addEventListener("click",function() {
- var xhr = new XMLHttpRequest || new ActiveXObject("Microsoft.XMLHTTP")
- xhr.open("GET","http://192.168.0.114:8081/car",true)
- xhr.send()
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4 && xhr.status == 200) {
- console.log(xhr.responseText);
- }
- }
- })
-
- script>
如果直接在public文件夹中的index.html页面,点击按钮,是可以通过ajax技术获取数据的,因为它们是同源的

而如果再新建一个test文件夹,其中index.html文件也再去请求相同的数据,那么就会报跨域错误,而无法请求到数据
-
taobao --- car
-
- <button id="btn">点击请求ajax数据button>
-
- <script>
-
- var btn = document.querySelector("#btn")
- btn.addEventListener("click",function() {
- var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
- xhr.open("GET","http://192.168.0.114:8081/car",true)
- xhr.send()
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 2 && xhr.status == 200) {
- console.log(xhr.responseText);
- }
- }
- })
-
- script>

注意:跨域请求时 ,前端是请求了跨域的后端,只是返回的数据被浏览器拒收了,并不是跨域了就不发网络请求。