本地的网页跨域请求node.js服务，跳坑Access-Control-Allow-Origin: *

最新推荐文章于 2023-01-31 11:03:50 发布

xinping7he

最新推荐文章于 2023-01-31 11:03:50 发布

阅读量493

点赞数 2

分类专栏： node.js 文章标签： nodejs xmlhttprequest

本文链接：https://blog.csdn.net/xinping7he/article/details/105324095

版权

node.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文借鉴了
一位亲爱的博主的博客：
https://www.cnblogs.com/laowang-tester/p/12204445.html
再通过大神阮一峰的博客了解跨域资源共享 CORS ：http://www.ruanyifeng.com/blog/2016/04/cors.html
最后得出自己的代码,内含一些知识点的注释，想了解这些知识最好看阮一峰的讲解

本地网页

 <!DOCTYPE html>
  <html>
       <head> 
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>client</title>
         </head> 
         <body>
            <button onclick="testClick()">点击</button>
            <br>
            <div id ="res_data"></div>
            <script type="text/javascript">
                function testClick(){
                    var HTTPrequest = new XMLHttpRequest();
                    HTTPrequest.withCredentials=false;

                    HTTPrequest.open("POST","http://127.0.0.1:8385/",true);
                    HTTPrequest.setRequestHeader("Content-Type","text/html; charset=utf-8");

                    //如果省略withCredentials设置，有的浏览器还是会一起发送Cookie。这时，可以显式关闭withCredentials。
                    HTTPrequest.withCredentials = false;

                    var msg = "this is a request"; //新建一个字符串，通过send方法发送给服务器
                    HTTPrequest.send(msg);
                    HTTPrequest.onload = function (e){
                        //本来是用jQuery操作dom的，后来改用原生的JavaScript操作dom了，我麻烦一下，大家方便就好
                        var p=document.createElement("p");
                        var text=document.createTextNode(HTTPrequest.responseText);
                        p.appendChild(text);
                        document.getElementById("res_data").appendChild(p);
                    }
                    HTTPrequest.onerror = function(e){
                        alert('请求失败');
                    }
                }
            </script>
 </body>
 </html>

node.js

var http = require('http');
 var PORT = 8385;
 http.createServer(function (req, res) {
     req.on('data', function(data) {
         console.log(data.toString());
     });
     //与CORS请求相关的字段，都以Access-Control-开头

     //表示是否允许发送Cookie。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
     //res.setHeader("Access-Control-Allow-Credentials", "true"); 

     
     //该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
     //本地html的orgin是null
     res.setHeader("Access-Control-Allow-Origin","null"); 

     /*
     需要注意的是，如果浏览器要发送Cookie，Access-Control-Allow-Origin就不能设为星号，
     必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，
     只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，
     且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
     */
     //res.setHeader("Access-Control-Allow-Origin","*");

     res.setHeader("Access-Control-Request-Method","PUT","POST","GET"); //非简单请求需要设置的
     res.setHeader("Access-Control-Allow-Headers", "Content-Type"); 
     res.setHeader("content-type", "text/html; charset=utf-8");
     var msg = "this is a response";
     res.end(msg);
 }).listen(PORT, function () {
     console.log('server is listening on port ' + PORT);
     })

node.js服务
请求成功，node响应

xinping7he

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
本地的网页跨域请求node.js服务，跳坑Access-Control-Allow-Origin: *

本文借鉴了一位亲爱的博主的博客：https://www.cnblogs.com/laowang-tester/p/12204445.html再通过大神阮一峰的博客了解跨域资源共享 CORS ：http://www.ruanyifeng.com/blog/2016/04/cors.html最后得出自己的代码,内含一些知识点的注释，想了解这些知识最好看阮一峰的讲解：本地网页 <!DOC...
复制链接

扫一扫