• 网络请求——跨域 的概念


        要了解跨域,首先要了解什么是同源策略:  

            同源策略:

            同源策略是浏览器的一种安全策略:指两个网址的协议、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代码:

    1. var fs=require("fs")
    2. var url=require("url")
    3. var querysting=require("querystring")
    4. var mime=require("mime")
    5. let urls={}
    6. var http=require("http")
    7. let router=function(req,res){
    8. //这个函数每次用户访问时运行
    9. let pathname=url.parse(req.url).pathname
    10. fs.readFile(router.basepath+pathname,(err,data)=>{
    11. if(!err){
    12. res.setHeader("content-Type",mime.getType(pathname))
    13. res.end(data)
    14. }else{
    15. if(!urls[pathname]){res.end("404 not found-mymvc")}
    16. else{urls[pathname](req,res)}
    17. }
    18. })
    19. }
    20. router.static=function(path){
    21. this.basepath=path
    22. }
    23. router.get=function(url,cb){
    24. urls[url]=cb
    25. }
    26. router.basepath=__dirname+"/public"
    27. http.createServer(router).listen(8081)
    28. module.exports=router;

         controller.js代码:

    1. module.exports={
    2. homegoods(req,res){
    3. var obj={data:[
    4. {title:"米饭",price:2,des:"好吃"},
    5. {title:"鱼香肉丝",price:20,des:"好吃"},
    6. {title:"水煮肉片",price:25,des:"好吃"}
    7. ]}
    8. var str=JSON.stringify(obj)
    9. res.setHeader("content-Type","text/json;charset=utf8")
    10. res.end(str)
    11. },
    12. car(req,res){
    13. var obj={data:[
    14. {title:"小面",price:18,des:"好吃",count:1},
    15. {title:"牛排",price:182,des:"好吃",count:1},
    16. {title:"宫保鸡丁",price:25,des:"好吃",count:2}
    17. ]}
    18. var str=JSON.stringify(obj)
    19. res.setHeader("content-Type","text/json;charset=utf8")
    20. res.end(str)
    21. }
    22. }

    index.js文件:

    1. const controller = require("./controller.js")
    2. var router = require("./router.js")
    3. router.get("/homegoods",controller.homegoods)
    4. router.get("/car",controller.car)

    public文件夹中的index.html文件:

    1. taobao --- home

    2. <button id="btn">点击使用ajax请求数据button>
    3. <script>
    4. var btn = document.querySelector("#btn")
    5. btn.addEventListener("click",function() {
    6. var xhr = new XMLHttpRequest || new ActiveXObject("Microsoft.XMLHTTP")
    7. xhr.open("GET","http://192.168.0.114:8081/car",true)
    8. xhr.send()
    9. xhr.onreadystatechange = function() {
    10. if (xhr.readyState == 4 && xhr.status == 200) {
    11. console.log(xhr.responseText);
    12. }
    13. }
    14. })
    15. script>

    如果直接在public文件夹中的index.html页面,点击按钮,是可以通过ajax技术获取数据的,因为它们是同源的

    而如果再新建一个test文件夹,其中index.html文件也再去请求相同的数据,那么就会报跨域错误,而无法请求到数据

    1. taobao --- car

    2. <button id="btn">点击请求ajax数据button>
    3. <script>
    4. var btn = document.querySelector("#btn")
    5. btn.addEventListener("click",function() {
    6. var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
    7. xhr.open("GET","http://192.168.0.114:8081/car",true)
    8. xhr.send()
    9. xhr.onreadystatechange = function() {
    10. if (xhr.readyState == 2 && xhr.status == 200) {
    11. console.log(xhr.responseText);
    12. }
    13. }
    14. })
    15. script>

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

  • 相关阅读:
    数据中台选型必读(四):要想中台建的好,数据模型得做好
    CE修改器学习历程之指针变量的保存
    【软件逆向】带壳带反调试找flag教程(VMProject3.0+X64dbg+ScyllaHide)
    基于php旅游网站管理系统获取(php毕业设计)
    Java测试题(核心基础)
    HarmonyOS开发:那些开发中常见的问题汇总(一)
    从零开始的深度学习之旅(3)
    ESP32 485温湿压、噪声4合1传感器测试
    gcc 编译参数 -fPIC 作用
    一、基础知识(2)-凸集、凸函数
  • 原文地址:https://blog.csdn.net/z_2532040197/article/details/126106319