XMLHttpRequest has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ head

最新推荐文章于 2024-08-02 14:16:34 发布

103style

最新推荐文章于 2024-08-02 14:16:34 发布

阅读量2.5k

点赞数 1

分类专栏： Web前端文章标签： vue ajax CORS CORS policy

本文链接：https://blog.csdn.net/lxk_1993/article/details/112227881

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

报错信息：Access to XMLHttpRequest at 'http://localhost:8081/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

主要是在服务端返回的响应中添加下面的头信息，不能直接写在 res.writeHead() 中

//看实际需求  一般只加第一个就行了
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Allow-Methods", "*");
res.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");//以及你自己需要的字段
res.setHeader("Access-Control-Expose-Headers", "*");

完整代码如下：

服务端 node.js 代码

var http = require('http')
var url = require("url");
var fs = require('fs')

http.createServer(function(req, res) {
    //主要时添加下面的几个配置就行 
    //直接写在 res.writeHead() 中没用
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Credentials", "true");
    res.setHeader("Access-Control-Allow-Methods", "*");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
    res.setHeader("Access-Control-Expose-Headers", "*");

    res.writeHead(200, 'Content-Type', 'application/json;charset=utf-8');
    //获取get请求后面带的参数
    var params = url.parse(req.url, true).query;
    if (params && params.name && params.url) {
        res.write("网站名：" + params.name);
        res.write("\n");
        res.write("网站url = " + params.url);
        res.end();
    } else {
        fs.readFile('../resource/demo.txt', function(err, data) {
            if (err) return res.end();
            res.write(data);
            res.end();
        })
    }
}).listen(8081);

前端Vue代码

<head>
	...
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="vue_ajax">
        <p>{{info}}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#vue_ajax",
            data: {
                info: null,
            },
            mounted() {
                axios
                    .get('http://localhost:8081/')
                    .then(res => (this.info = res))
                    .catch(function(err) {
                        console.log(err)
                    });
            }
        });
    </script>
</body>
</html>

103style

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ head

报错信息：Access to XMLHttpRequest at 'http://localhost:8081/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.主要是在服务端返回的响应中添加头信息，不能直接写在 res.writeHead() 中res.setHeader("Access-
复制链接

扫一扫

专栏目录