express框架：同源策略、解决跨域问题

已于 2023-05-24 10:03:37 修改
阅读量2.6k 收藏 4
点赞数 1
分类专栏： 大杂烩 文章标签： ajax javascript 前端
于 2022-07-21 23:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lalala_dxf/article/details/125907891
版权

文章目录

同源策略与跨域解决

1、同源策略概念

同源策略（Same-Origin Policy）最早由NEtscape公司提出，是浏览器的一种安全策略。同源指的是协议、域名、端口号必须完成相同，违背同源策略就是跨域。

案例

  • server.js
const express = require('express')

const app = express()

app.get('/home',(request,response) => {
    // 当url为127.0.0.1:9000/home时，响应一个页面
    response.sendFile(__dirname + '/index.html')
})

app.get('/data',(request,response) => {
	// 当页面index.html中按钮被点击后响应数据
    response.send('用户数据')
})

// 监听9000端口
app.listen('9000',() => {
    console.log("服务启动,监听端口中...");
})
  • 页面文件index.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>测试同源策略</title>
</head>

<body>
    <h3>hello</h3>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button')
        btn.onclick = function () {
            const xhr = new XMLHttpRequest()
            // 这里满足同源策略，所以url可以简写：这里省略了域名http://127.0.0.1:9000
            xhr.open('get', '/data')
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.response);
                    }
                }
            }
        }
    </script>
</body>

</html>

浏览器输入127.0.0.1:9000/home，得到如下结果
在这里插入图片描述
点击按钮，在控制台可以看到获取到了服务器响应的数据
在这里插入图片描述

2、解决跨域问题

2.1 方法一：jsonp解决跨域问题

  • jsonp是什么
    jsonp（JSON with Padding），是一个非官方的跨域解决方法，纯粹凭借程序员的聪明才智开发处理，只支持get请求。
  • jsonp工作原理
    在网页有一些标签自带跨域能力，例如img、link、iframe、script
    JSONP就是利用script标签的跨域能力来发送请求的。
原生html实现

例如：

案例一：

  • 测试用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>
    <div id="result"></div>
    <!--跨域请求-->
    <!--vscode中使用liveserver打开网页时，端口号为5050，所以下面的script标签中确实跨域了-->
    <script src="http://127.0.0.1:8000/jsonp-test"></script>

</body>
 </html>
  • server.js文件【使用express框架模仿的服务器】
const express = require('express')

const app = express()

app.get('/jsonp-test',(request,response) => {
	// 响应一个字符串
    response.send('hello jsonp')
})

app.listen('8000',()=>{
    console.log("服务启动，监听端口中..."); })

得到的结果报错，意思为不被期待的标识符，说的是script标签不能识别普通字符串
在这里插入图片描述
因为响应到页面的是一个字符串，而一个script标签是不能解析字符串的，而需要响应一个js代码，因此，server.js需要响应一个js代码的字符串


const app = express()

app.get('/jsonp-test',(request,response) => {
    // const data = {
    //     name:"小刘"
    // }
    response.send('console.log("hello jsonp")')
    // response.send(`handle(${data})`) 
})

app.listen('8000',()=>{
    console.log("服务启动，监听端口中..."); 
 })

成功获取结果
在这里插入图片描述
打开浏览器网络，可以看到成功获取响应了，并且响应式js代码
在这里插入图片描述

案例二：

  • server.js
const express = require('express')

const app = express()

app.get('/jsonp-test',(request,response) => {
    const data = {
        name:"小刘"
    }

    // 将data转换为json字符串形式
    const str = JSON.stringify(data)
    // 利用模板字符串，将调用方法以js代码的格式响应过去
    response.send(`handle(${str})`)
})

app.listen('8000',()=>{
    console.log("服务启动，监听端口中...");
})
  • test.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>
    <div id="result">

    </div>
    <script>
        // 将方法声明在这，而方法调用通过script标签跨域传进来
        function handle(data){
            const result = document.getElementById('result')
            result.innerHTML = data.name
        }
    </script>
    <!-- 实现跨域 -->
    <script src="http://127.0.0.1:8000/jsonp-test"></script> 
</body> 
</html>

在这里插入图片描述
查看浏览器网络，接收到的响应是一个方法调用的js代码，并且方法中的参数也是由另一端的服务器传过来的。
在这里插入图片描述

  • 具体案例使用

  • 案例描述：输入款输入用户名，判断用户名是否存在（这句逻辑就不写了）不存在，在输入框下显示"用户不存在"，输入框样式改变。
    步骤：
    （1）动态创建一个script标签
    （2）设置script的URL
    （3）将script标签添加到页面中

  • 模拟服务器端代码【express框架实现】

const express = require('express')

const app = express()

app.get('/test',(request,response) => {
    // 这里省略逻辑判断
    const data = {
        exist:1,
        msg:'用户名已经存在'
    }

    // 将data转换为json字符串形式
    const str = JSON.stringify(data)
    // 利用模板字符串，将调用方法以js代码的格式响应过去
    response.send(`handle(${str})`)
})

app.listen('8000',()=>{
    console.log("服务启动，监听端口中...");
})
  • 页面代码
<!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>
    用户名:<input type="text" id="username">
    <p></p>
    <script>
        const input = document.querySelector('input')
        const p = document.querySelector('p')

        // 声明函数
        function handle(data){
            input.style.border = 'solid 3px #f00'
            p.innerHTML = data.msg;
        }

        input.onblur = function(){
            // 获取用户的输入值
            let username = this.value;
            // console.log(this); // this标识的input整个标签元素
            console.log(username);
            // 创建script标签
            const script = document.createElement('script')
            // 设置标签的src属性
            script.src = 'http://127.0.0.1:8000/test'
            // 将script节点添加到文档中
            document.body.appendChild(script)
        }
    </script>
</body>
</html>

效果展示：
请添加图片描述

jquery实现
$.ajax({
	url:"http://www.test.com:8080/login",
	type:'get', // jsonp只支持get请求
	dataType:'jsonp', // 请求类型为jsonp
	jsonpCallback:'handleCallback', // 自定义函数
	data:{}, // 要传送的数据
})
vue实现
this.$http.jsonp('http://www.omain2.com:8080/login',{
	params:{},
	jsonp:'handleCallback',
}).then((res)=>{
	console.log(res);
})

2.2 方法二：设置CORS响应头实现跨域

  • CORS是什么
    CORS（Cross-Oringin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案。

CORS特点是不需要再客户端做人任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准增添了一组HTTP首部字段，允许服务器生命哪些源站通过浏览器有权限访问哪些资源。

  • CORS工作原理
    CORS通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后就会对响应’放行’

  • CORS的使用

server.js

// 引入express
const { response } = require('express')
const express = require('express')

// 创建应用对象
const app = express()

app.get('/server',(request,response) => {
    // 设置响应头，实现跨域，第二个参数是指定可以跨域的地址，*表示所有
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置3s后响应
    response.send('hello')
})
// 监听端口，启动服务
app.listen(8000,() => {
    console.log("服务启动,监听8000端口中...");
})

前端：

<!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>ajax get请求</title>
    <style>
        #decorate{
            width: 200px;
            height: 100px;
            border: dotted 3px pink;
        }
    </style>
</head>
<body>
    <button id="btn">发送</button>
    <div id="decorate"></div>

    <script>
        let btn = document.getElementById('btn')
        let div = document.getElementById('decorate')
        btn.onclick = function(){
            const xhr = new XMLHttpRequest()
            xhr.open('get','http://127.0.0.1:8000/server)
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status<300){
                        console.log(xhr.response); // 响应体
                        // 设置文本
                        div.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>
</html>

如果需要对所有的路由都解决跨域问题，那么可以写一个中间件，放在所有路由前面，如下

app.all('*', function (req, res, next) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});

或者更简单点，引入一个别人已经写好的处理跨域请求的中间件，如下：
安装中间件

npm install cors

使用

app.use(cors())
持久的棒棒君
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue+node(express)实现前后端跨域访问
xiuxialala的博客
11-03 479
方法1、vue工程内vue.config.js（目的：将vue工程中的默认接口http://127.0.0.1:8080换成express服务器接口http://127.0.0.1:3000）如果在routes/users.js中配置接口，则访问时就是http://127.0.0.1:3000/users再拼接接口路径。方法2、安装cors依赖，index.js添加cors配置，允许跨域的服务器地址http://127.0.0.1:8080。（4）重要文件：/bin/www.js以及app.js。
express如何解决ajax跨域访问session失效问题详解
10-16
本文将详细探讨如何解决Express中ajax跨域访问时session失效的问题。 首先，我们需要理解为何在跨域请求中session会失效。在HTTP协议中，由于同源策略的限制，浏览器不会在跨域请求中发送cookies，而session通常是...
Express解决跨域问题
m0_59511468的博客
06-15 7752
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；跨域报错要解决跨域问题就要在Express添加： 添加之后再次执行就好了...
express跨域配置
放羊的小孩
03-22 4723
express、跨域设置
Node.js+Express框架中的跨域解决方案
最新发布
高性价比服务器就选：蓝易云
05-08 458
同源策略是浏览器安全的基石，但在实际开发过程中，我们需要让许多前端页面能够访问后端API，因此应该学会如何在Node.js和Express框架下处理跨域问题。这样，您只需按照实际项目需求对CORS进行配置，即可快速搭建出高度自定义且有趣的跨域解决方案，让前后端安全、有效地进行数据通信。为了启用CORS支持，您需要在Node.js和Express框架下安装并使用一个叫做CORS的NPM包。你可以选择为整个应用启用CORS或者只为特定的路由启用CORS。实际情况中，你可能需要根据需求定制CORS的行为。
十二、Express接口编写 —— 跨域问题
灵魂学者的博客
01-03 1393
在前面的HTTP模块内容内容当中讲到这个跨域的问题，跨域就涉及到浏览器的同源策略，跨域只出现在浏览器当中，在浏览器当中去执行脚本的时候会进行一个同源检测，只有是同源的脚本才会被浏览器执行，不同源就是跨域，同源就是请求的url协议、域名、端口号要相同，只有相同的才能够互相访问，不同就会出现跨域问题。下面用一个简单的例子图示理解：下面来回顾之前通过后端处理的方式解决跨域的问题；通过后端的设置来解决请求跨域的问题： http://127.0.0.1:5500发起请求http://127.0.
Express处理跨域请求 / 如何通过设置CORS允许跨域请求
一名高级工程师的博客
04-09 2079
How to allow cross site requests by setting up CORSA JavaScript application running in the browser can usually only access HTTP resources from the same domain (or...
详解ajax跨域问题解决方案
10-19
Ajax跨域问题源于浏览器的同源策略，这是一种安全机制，旨在保护用户信息不被恶意网站获取。同源策略规定，JavaScript只能访问与当前页面同源（即协议、域名、端口都相同）的资源。当尝试通过Ajax请求访问不同源的...
NODE.JS跨域问题的完美解决方案
10-21
在Node.js中，我们可以使用Express框架来轻松处理跨域请求。Express是一个强大的Web应用框架，提供了丰富的中间件机制来处理各种Web服务场景。以下就是在Express中设置跨域访问的方法： 首先，我们需要引入Express...
file协议导致的跨域问题以及解决方案.docx
10-26
5. 使用 Node.js 开启一个服务器，例如使用 Express 框架，可以解决跨域问题。 同源策略是为了安全而设定的约定，ES6 模块化也需要遵守同源策略，而 File 协议导致的跨域问题可以通过不同的解决方法来解决。
doc解决跨域问题.pdf
12-18
"doc解决跨域问题.pdf"文档中介绍的是如何在基于Koa的后端项目中处理这个问题。Koa是一个由Express.js作者创建的现代JavaScript Web框架，它提供了一种更简洁的方式来处理HTTP请求。 首先，项目初始化是必要的，这...
express设置跨域
前端精髓
03-30 1700
跨域资源共享 const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()) app.use((req, res, next) => { res.header('Access-Control-A...
解决跨域问题
马大哈的博客
08-09 133
跨域问题
Express服务端快速解决不同域名访问cors跨域
qq_44472790的博客
06-26 808
此时,本地启动:http://localhost:3000,也能访问https://www.test.com.cn/api/getDataList接口数据,目前cors不支持IE10以下版本浏览器,其他大部分浏览器已经支持。此时服务端部署接口服务器域名比如:www.test.com.cn, 比如获取列表数据接口https://www.test.com.cn/api/getDataList。在Express服务端入口app.js配置。utils/cors.js文件。这里使用npm包cors。
后端配置跨域怎么配置
Stephen_CY666的博客
11-04 773
在后端配置跨域，需要在服务器的代码中添加相应的设置。在 PHP 中，可以在服务器的响应头中添加 CORS 相关的设置。在使用 Node.js 的 Express 框架时，可以使用。在 Java 中，可以使用 Spring 框架自带的。这样就会允许来自任何域名的请求。参数来指定允许的域名列表，通过。这样就会允许来自任何域名的请求。中间件来处理跨域问题。指定了允许跨域请求的域名，注解来处理跨域问题。指定了支持的请求方法，指定了允许的请求头。参数来指定缓存时间。
nodejs express 允许跨域设置
黄彪博客
07-19 6355
为了模拟向后台发送请求，需要搭建一个web工程的demo，使用nodejs 的express 模拟web工程 var express = require("express"); var http = require("http"); var app = express(); ////////////////////// 获取post过来的数据 /////////////////////...
nodejs express 允许跨域访问(Access-Control-Allow-Origin)
热门推荐
dreamer2020的专栏
06-09 4万+
前世今生 在WEB应用普及的今天，个人信息（账号、COOKIE等）广泛应用于网页。浏览器同源策略保证了WEB环境的安全性。同源策略是说，在a.com域名下通过ajax或者XmlHttpRequest等方式访问b.com的资源时，是不被允许的。 然而在很多时候，出于业务的的需要，我们经常有类似的跨域访问 的需求。浏览器有一些支持跨域访问的标签，例如script,img等。 有这样的需求，自然就
nodejs express 服务器端允许跨域访问设置
开心大表哥
12-28 3647
nodejs express 服务器端允许跨域访问设置 问题就是这样的： 处理成功后是这样的： 处理代码是这样的://给前端提供数据 router.get('/getInfoByOrder',function(req,res,next){ /*处理浏览器同源策略问题*/ res.header("Access-Control-Allow-Origin", "*");
Express搭建服务遇到的跨域问题
饭一口口吃的博客
09-01 355
express搭建服务遇到跨域报错问题如何解决
怎么设置Access-Control-Allow-Origin解决跨域问题
08-22
要解决跨域问题并设置Access-Control-Allow-Origin头部，你可以按照以下步骤进行操作： 1. 在服务器端，确保你的API或网站支持跨域请求。这可以通过在响应头中设置Access-Control-Allow-Origin来实现。 2. Access-Control-Allow-Origin头部指定了允许访问该资源的源。你可以将其设置为允许的源，也可以使用通配符来允许任何源进行访问。 3. 例如，如果你希望允许所有源进行访问，可以将Access-Control-Allow-Origin设置为"*"。如果你只想允许特定的源进行访问，可以将其设置为该源的域名或IP地址。 4. 在服务器响应中添加Access-Control-Allow-Origin头部。具体的实现方式取决于你使用的服务器端编程语言和框架。 以下是一些常见的服务器端设置示例： - Node.js（使用Express框架）： ``` app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); next(); }); ``` - PHP： ``` header("Access-Control-Allow-Origin: *"); ``` - Java（使用Spring框架）： ``` @CrossOrigin("*") ``` 请注意，将Access-Control-Allow-Origin设置为"*"可能会存在安全风险。因此，在生产环境中，你应该仔细考虑并根据自己的需求限制允许访问的源。 通过设置Access-Control-Allow-Origin头部，你可以解决跨域问题，并允许不同源的客户端访问你的API或网站。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值