前端开发，解决跨域的几种方法

最新推荐文章于 2025-04-15 17:01:27 发布

丶帆

最新推荐文章于 2025-04-15 17:01:27 发布

阅读量518

点赞数

文章标签： node.js

本文链接：https://blog.youkuaiyun.com/yf19990720/article/details/108683660

版权

本文介绍了前端开发中遇到的跨域问题及其解决方法，包括同源策略的概念和作用，以及设置请求头、使用代理和JSONP三种常见的跨域解决方案。重点讲解了代理解决跨域的原理，即通过代理中间层转换域名来实现跨域请求的正常进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域

同源策略

什么是同源策略，其作用是什么？

同源策略指的是：协议+域名+端口三者皆相同，可以视为在同一个域，否则为不同域。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
作用是一个用于隔离潜在恶意文件的重要安全机制。
所限制的跨域交互包括：

Cookie、LocalStorage、IndexdDB 等存储内容；
DOM 节点；
Ajax 请求。

当协议（protocol），主机（host）和端口号（port）三者只要有一个不同则会出现跨域问题。

跨域解决方法

解决跨域的方式：
1.设置请求头（在项目测试中）
2.代理服务器
3.jsonp （ jsonp 只能支持get传参的方式）

设置请求头

		response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        //XXX为新增跨域字段
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Accept,X-Requested-With,XXX")
        设置Access-Control-Allow-Headers允许XXX字段在请求头中跨域请求

代理解决跨域原理：

通过一些方法设置代理，在请求发送(接收)之前加入中间层，将不同的域名转换成相同的就解决了跨域的问题，客户端发送请求时，不直接到服务器，而是先到代理的中间层，在这里将localhost：8088的这个域名装换为192.168.0.67:8061，再将请求发送到服务器，这样在服务器端收到的请求就是使用的192.168.0.67:8061域名，同理，当服务器返回数据的时候，也是先到代理的中间层，将192.168.0.67:8061转换成localhos：8088；这样在客户端也是在相同域名下访问的了。

jsonp

html代码

<!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>请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script>
        $("button").click(()=>{
            $.ajax({
                url : "http://localhost:8081/getData",
                type : "get",
                success(data){
                    console.log(data)
                }
            })
        })
        
    </script>
</body>
</html>

node代码

var http = require('http');
http.createServer(function (request, response) {
    response.writeHead(200, {
        'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',    // 允许访问的域（协议+域名+端口）
        'Access-Control-Allow-Methods' : "POST,GET,DELETE,PUT,OPTIONS"   // 允许请求方式用着五种
    })
  if(request.url == "/getData"){
      const data = {
          status : "ok",
          data : [
              {
                  name : '张三',
                  age : 10
              },
              {
                name : '张三',
                age : 10
            },
            {
                name : '张三',
                age : 10
            }
          ]
      }
      response.end(JSON.stringify(data))
  }
}).listen(8081);