跨域问题实战及分析

奋斗的菜鸟.com

已于 2023-12-28 23:56:57 修改

阅读量823

点赞数 19

分类专栏： js进阶文章标签： node.js 前端

于 2023-12-28 23:55:45 首次发布

本文链接：https://blog.csdn.net/CodePrincess/article/details/135280327

版权

js进阶专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自己写了一个nodejs服务器，在html页面中调用接口，遇到了跨域问题,该怎么解决呢？

server.js
创建服务器

const express=require('express');
const app=express();//创建express服务器
app.listen(80,()=>{//启动服务器
    console.log('express server run  at http://127.0.0.1')
})
//监听get请求
//参数1: 客户端请求的url地址，
//参数2:请求对应的处理函数
//req  请求对象
//相应对象
app.get('/user', function(req, res) {
    res.send({name:'zs',age:20,gender:'男'})//res.send(),可以把处理好的内容返回给客户端
})

server.js 同级下新建一个 test.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>
    
</body>
<script src="./jQuery.min.js"></script>
<script>
    $.ajax({
        method:'get',
        url:'http://127.0.0.1/user',
    }).done(function(res){
        console.log(res);
    })
    .fail(function(rej){
        
    })
</script>
</html>

加载test.html页面console 有报错：
Access to XMLHttpRequest at ‘http://127.0.0.1/user’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
CORS是指跨源资源共享报错是跨域的意思

跨域

跨域的概念很简单前端请求的url的域名、端口、协议与当前页面的url的域名、端口、协议不同就是跨域，如果相同，就是处于相同域上

，即当一个请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同则视为跨域，

产生的原因

跨域问题产生的原因主要是由浏览器的“同源策略”限制导致的，是浏览器对JavaScript 施加的安全限制。

同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或它加载的脚本如何能与另一个源的资源进行交互。能够减少恶意文档，减少可能被攻击媒介。 如果两个URL的协议、域名、端口号都相同，就称这两个URL同源。

可理解为请求的url的协议，域名，端口号和当前页面的url协议，域名，端口号相同就是一种同源

浏览器默认两个不同的源之间是可以互相访问资源和操作DOM的。两个不同的源之间若是想要访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。它的存在可以保护用户隐私信息，防止身份伪造。

同源策略目的举例

同源策略的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。假设你成功登录了某个银行网站，自己的账户余额在你登录后都可以随意操作，大家都知道很多网站系统在你登录成功后都会给你的浏览器发送Cookie，Cookie中一般会记录你的部分信息甚至是登录状态，而当你在未退出银行网站的情况下，接着又去浏览了其他网站，如果其他网站可以读取银行网站的 Cookie，会发生什么？很显然，你的Cookie中信息会全部泄露，甚至其他网站还会使用你的Cookie来登录你的账号冒充你来操作你的账户，由于浏览器同时还规定，提交表单不受同源策略的限制，从而你的钱就会不翼而飞。这就是所谓的CSRF攻击，中文名称为：跨站请求伪造攻击，即攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账……造成的问题包括：个人隐私泄露以及财产安全。

同源策略的好处

浏览器的同源策略目的是为了保护用户的信息安全,为了防止恶意网站(大概查不到ip不能进行定位)窃取用户在浏览器上的数据,如果不是同源的站点,将不能进行如下操作 :

Cookie、LocalStorage 和 IndexDB 无法读写
DOM 和 Js对象无法获得
AJAX请求不能发送

最后，上述访问nodejs 服务器跨域问题该怎么解决?
通过Access-Control-Allow-Origin响应头，就告诉了浏览器。如果请求我的资源的页面是我这个响应头里记录了的"源"，则不要拦截此响应，允许数据通行。

响应头中添加

‘Access-Control-Allow-Origin’: ‘浏览器中的url’,
‘Cache-Control’: ‘no-cache’,
‘Access-Control-Allow-Origin’: ‘*’

const express=require('express');
const app=express();//创建express服务器
app.listen(80,()=>{//启动服务器
    console.log('express server run  at http://127.0.0.1')
})
//监听get请求
//参数1: 客户端请求的url地址，
//参数2:请求对应的处理函数
//req  请求对象
//相应对象
app.get('/user', function(req, res) {
    res.set({  
        'Access-Control-Allow-Origin': 'file:///D:/StudyAndhi/nodejs/Express/test.html',
        'Cache-Control': 'no-cache',  
        'Access-Control-Allow-Origin': '*'  
      }); 
    res.send({name:'zs',age:20,gender:'男'})//res.send(),可以把处理好的内容返回给客户端
})