用 cors 解决:Access to XMLHttpRequest at ‘http://localhost:5500/get‘ from blocked by CORS policy 等的跨域问题

1、问题描述

(1)在从服务器访问信息的时候,突然报错,报错的信息为:

Access to XMLHttpRequest at ‘http://localhost:5500/get’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

(2)经查询,报错的原因是 访问跨域的问题;

2、代码展示

(1)写的服务器的代码如下,此时该服务器的名称为:‘server.js’;

const express = require('express');
const app = express();

app.get("/get", (req, res) => {

  let r = {   // 想要传递一个 json 数据;
    id: 1,
    name: 'zs'
  };
  let data = JSON.stringify(r);   // 服务器给浏览器的一般都是字符串,因此需要先将其转成 json 字符串;

  res.writeHead(200, {  // 可以用 writeHead(响应头) 设置当前的状态码为:200(成功);  并将传递的内容类型发过去(如: 'Content-type': 'application/json' 表示传递内容的是 json 字符串); 
    'Content-type': 'application/json'
  })
 
  res.write(data); // 此时的显示结果为:'{"id":1,"name":"zs"}',就是想要传递的 json 数据; (即:成功);
  res.end();
});

app.listen(5500, () => {
  console.log('服务器正在启动...');
})

注意:此时肯定通过 npm init -y 创建 package.json 配置文件了; 当然也下载了 npm i express 的框架了,然后才能运行上述服务器代码;

(2)写的客户端页面的代码如下,此时该页面的名称为:‘1.html’;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">按钮</button>
  <script>
    var btn = document.querySelector('#btn');
    btn.addEventListener('click', function () {
      

      // 通过 ajax 向服务器发送请求来获取信息(用 cors 来解决跨域的问题);

      let xhr = null;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }

      xhr.open("get", "http://localhost:5500/get", true) // a=1&b=2
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
      }
	});

  </script>
</body>

</html>

(3)在终端运行,运行结果如下:

在终端运行

A、访问 server.js 这个服务器,展示结果为:

此时只要在控制台不报错,就没有问题。

访问 server.js 这个服务器

B、用 ‘Live Server’ 打开客户端页面;

用 ‘Live Server’ 打开客户端页面

C、点击 ‘按钮’ 后的报错结果显示为:

点击 ‘按钮’ 后的报错结果显示

3、解决办法

通过 在服务器开启跨域资源共享 (cors) 来解决跨域的问题:

(1)服务器端的代码修改为如下所示:

const express = require('express');
const app = express();


app.all("*", function (req, res) {   //此时的 '*' 指用来处理所有的请求,从而在服务器端解决跨域的问题;
  res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');   //此时表示:允许 'http://127.0.0.1:5500' 地址来访问服务器;   
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT');           //此时表示:允许发的请求方式,如:'GET,POST,PUT';
  res.header('Access-Control-Allow-Headers', 'Content-Type');           //此时表示:允许发的请求头,如:'Content-Type' 请求头的类型;
  req.next();   //请求回来,并进行下一步的操作;
});


app.get("/get", (req, res) => {

  let r = {   // 想要传递一个 json 数据;
    id: 1,
    name: 'zs'
  };
  let data = JSON.stringify(r);   // 服务器给浏览器的一般都是字符串,因此需要先将其转成 json 字符串;

  res.writeHead(200, {  // 可以用 writeHead(响应头) 设置当前的状态码为:200(成功);  并将传递的内容类型发过去(如: 'Content-type': 'application/json' 表示传递内容的是 json 字符串); 
    'Content-type': 'application/json'
  })
 
  res.write(data); // 此时的显示结果为:'{"id":1,"name":"zs"}',就是想要传递的 json 数据; (即:成功);
  res.end();
});

app.listen(5500, () => {
  console.log('服务器正在启动...');
})

注意:该操作仅在服务器端进行修改,不需要修改在客户端的代码;

(2)此时将 server.js 这个服务器重新运行,用 ‘Live Server’ 打开客户端页面并点击 ‘按钮’ 后,控制台的显示结果为:

用 ‘Live Server’ 打开客户端页面并点击 ‘按钮’ 后,控制台的显示结果

注意:此时只要将 json 数据显示出来,就说明解决了跨域的问题;

4、小结:

哪里有不对或不合适的地方,还请大佬们多多指点和交流!

原文:链接

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 用 cors 解决:Access to XMLHttpRequest at ‘http://localhost:5500/get‘ from blocked by CORS policy 等的跨域问题

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们