网络请求——跨域的概念

要了解跨域，首先要了解什么是同源策略：

同源策略：

同源策略是浏览器的一种安全策略：指两个网址的协议、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).pathnamefs.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文件:

<h1>taobao --- home</h1><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文件也再去请求相同的数据，那么就会报跨域错误，而无法请求到数据

    <h1>taobao --- car</h1><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>

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

网络请求——跨域的概念相关推荐

记录uni-app网络请求跨域、安卓打包后网络请求报错
跨域测试方法如下:网络请求接口地址玩安卓的开放API:https://wanandroid.com/article/listproject/0/json 注意url是完整地址,并且manifest. ...
Tomcat中的字体请求跨域问题解决
Tomcat中的字体请求跨域问题解决原作者地址: https://blog.csdn.net/u011974399/article/details/79990505 修改tomcat的web.xml ...
关于vue-cli3中配置请求跨域的问题
关于vue-cli3中配置请求跨域的问题根据Vue CLI3官方文档, 需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题. 1.关于vue.config.j ...
SpringMVC中的异步请求-跨域访问
发送异步请求: <%@page pageEncoding="UTF-8" language="java" contentType="text/h ...
关于ajax post请求跨域问题的解决心得
关于ajax post请求跨域问题的解决心得参考文章: (1)关于ajax post请求跨域问题的解决心得 (2)https://www.cnblogs.com/guaishushulz/p/670 ...
React项目中请求跨域解决方法
React项目中请求跨域解决方法今天经理给我了一个React项目地址,让我拉下来并跑起来,拉下来运行起来后,发现所有的请求都失败了,并且都是由于跨域问题导致的.花了点时间,解决了这个问题,在这里记录 ...
解决POST请求跨域问题
解决POST请求跨域问题今天在做项目的时候.出现了POST请求跨域失败,而GET请求跨域成功的很奇怪的情况,自己为此研究了好久,特此做个记录. 场景:前端发起POST请求后端接口时,报错,错误如下: ...
WebApp开发：ajax请求跨域问题的解决
WebApp开发:ajax请求跨域问题的解决参考文章: (1)WebApp开发:ajax请求跨域问题的解决 (2)https://www.cnblogs.com/code-style/p/42094 ...
解决ajax请求跨域,解决ajax请求跨域
跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法方法一 // ajax请求跨域 /* *解决a ...

网络请求——跨域的概念

网络请求——跨域的概念相关推荐

最新文章

热门文章

网络请求——跨域 的概念

网络请求——跨域 的概念相关推荐

最新文章

热门文章

网络请求——跨域的概念

网络请求——跨域的概念相关推荐