解决跨域报错Access to XMLHttpRequest at ‘http://127.0.0.1:3001/user‘ from origin ‘http://127.0.0.1:5501‘

作者：酷酷是懒虫 | 2024-06-23 09:40:54

踩

access to xml

Access to XMLHttpRequest at 'http://127.0.0.1:3001/user' from origin 'http://127.0.0.1:5501' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

出现上述情况报错就是因为跨域了。

跨域是为了保障安全，浏览器根据同源策略（协议，域名，端口号都要一致）给出的限制。

ajax能直接获取同源的数据。不同源的需要解决跨域问题

一、跨域的体现：

1.把解决跨域方案关闭，运行后台

2.open in live server, 出现报错

二、解决跨域：

1.开发中最常用的：给后台说添加个响应头，允许跨域


  //设置允许跨域的域名，*代表允许任意域名跨域
  res.setHeader(
    'Access-Control-Allow-Origin',"*"
  )

2.利用proxy反向代理，通过拦截解决跨域

3.利用jsonp解决跨域，原理就是利用script标签的src属性，可以跨域。

（1）本地的src属性解决跨域

创建一个js文件，存放数据

使用路径后边拼接callback=函数只要src资源路径有callback 就是在解决跨域且通过之后的函数进行传值拿数据


<!-- 调用数据必须在src引入的前边 -->
  <script>
    function show(val) {
      console.log(val);
    }
  </script>
</html>
<!-- src  就是能跨域
jsonp解决跨域 的原理：  利用src的跨域能力
-->
<script src="./test.js?callback=show"></script>

（2）动态的创建一个script标签增加src属性来解决跨域

先写一个js文件存储数据，并设置接口地址（callback=函数名解决跨域的底层利用get拼接路径）


/* 
jsonp 接口地址：
http: //localhost:3003/jsonp?callback=test
传参数
约定请求的参数中的指定参数：callback
服务器发现是 JSONP 请求， 就会把原来的返回对象变成 JS 代码。
JS 代码是函数调用的形式， 它的函数名是 callback 的值， 
它的函数的参数就是原来需要返回的结果。
 
*/
 
 
//通过require将http库包含到程序中
let http = require('http');
//引入url模块解析url字符串
let url = require('url');
//引入querystring模块处理query字符串
let querystring = require('querystring');
//创建新的HTTP服务器
let server = http.createServer();
//通过request事件来响应request请求
server.on('request', function (req, res) {
  let urlPath = url.parse(req.url).pathname;
  let qs = querystring.parse(req.url.split('?')[1]);
 
  // 如果请求路径里面包含有jsonp 和callback 就判断出来这是一个jsonp请求
  if (urlPath === '/jsonp' && qs.callback) {
    res.writeHead(200, {
      'Content-Type': 'application/json;charset=utf-8'
    });
 
    // 此处的data数据 就是后台要返回个前端的数据
    let data = {
      "msg": "jsonp返回的数据",
      "fn": qs.callback
    };
    data = JSON.stringify(data);
    // 根据callback的值，创建函数 data 是函数内传递的参数
    let callback = qs.callback + '(' + data + ');';
    console.log(callback);
    // 向前端进行响应
    res.end(callback);
  } else {
    res.writeHead(200, {
      'Content-Type': 'text/html;charset=utf-8'
    });
    res.end('Hell World\n');
  }
});
server.listen(3003,'localhost',function(){
  console.log('your server is running here:localhost:3003');
});

后台运行

动态的创建src


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="getJsonp()">点击jsonp</button>
  </body>
</html>
<script>
  function show(v) {
    console.log(v);
  }
 
  function getJsonp() {
    var script_ = document.createElement("script");
    script_.src = "http://localhost:3003/jsonp?callback=show";
    document.body.appendChild(script_);
    if (script_) {
      script_.parentNode.removeChild(script_);
    }
  }
</script>

总结：跨域的出现是因为浏览器同源策略，为了安全，解决跨域实际开发中就是后台添加个响应头其余方式做个了解即可。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/749324

解决跨域 报错Access to XMLHttpRequest at ‘http://127.0.0.1:3001/user‘ from origin ‘http://127.0.0.1:5501‘

一、跨域的体现：

二、解决跨域：

解决跨域报错Access to XMLHttpRequest at ‘http://127.0.0.1:3001/user‘ from origin ‘http://127.0.0.1:5501‘