• 解决跨域问题的方法 --- CORS


    解决跨域的方式有很多种,本篇主要介绍 CORS :

      CORS 全称是"跨域资源共享"(Cross-origin resource sharing)。
      CORS需要浏览器和服务器同时支持。但是目前基本上浏览器都支持,所以我们只要保证服务器端服务器实现了 CORS 接口,就可以跨源通信。

            在数据包的头部配置Access-Control-Allow-Origin字段以后,数据包发送给浏览器后,
      浏览器就会根据这里配置的白名单 "放行" 允许白名单的服务器对应的网页来用ajax跨域访问 。

            CORS解决跨域问题,就是在服务器端给响应添加头信息。

            Access-Control-Allow-Origin        允许请求的域
            Access-Control-Allow-Methods        允许请求的方法
            Access-Control-Allow-Headers        预检请求后,告知发送请求需要有的头部
            Access-Control-Allow-Credentials        表示是否允许发送cookie,默认false;
            Access-Control-Max-Age       本次预检的有效期,单位:秒;

     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;

    test1文件夹中的index.js文件:

    1. var router = require("./router.js")
    2. router.get("/ajax1",function(req,res) {
    3. res.end('{"name":"xiaozhang","age":21}')
    4. })

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

    1. <script>
    2. function fn() {
    3. var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
    4. xhr.open("GET","http://192.168.0.114:8081/ajax1",true)
    5. xhr.send()
    6. xhr.onreadystatechange = function() {
    7. if (xhr.readyState == 4 && xhr.status == 200) {
    8. console.log(xhr.responseText);
    9. }
    10. }
    11. }
    12. script>

    未设置CORS时,会报跨域错误:

     在test1的index.js文件中设置CORS后就可以访问到数据:

    1. var router = require("./router.js")
    2. router.get("/ajax1",function(req,res) {
    3. res.setHeader("Access-Control-Allow-Origin","http://192.168.0.114:8082")
    4. res.end('{"name":"xiaozhang","age":21}')
    5. })

     

  • 相关阅读:
    VB实现长标题文本压缩
    AIGC 时代,Amazon DeepRacer 带你驶入机器学习的快车道
    Java面试题之“==“和“equals“和HashCode的区别
    基于SSH开发酒店管理系统
    计算机网络期末知识点(第六章)
    VideoPipe可视化视频结构化框架更新总结(2023-3-30)
    HTML 学习笔记(五)超链接
    【选题推荐】软件工程毕设选题可以选什么
    深度学习DAY3:神经网络训练常见算法概述
    开发工具安装
  • 原文地址:https://blog.csdn.net/z_2532040197/article/details/126109656