express使用cors跨域

创建一个文件夹，在该文件夹中创建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>Document</title><script>window.onload = function () {var btn = document.getElementById('btnLogin')btn.addEventListener('click', function () {sendRequest()})function sendRequest() {var userName = document.getElementById('userName').valuevar xhr = new XMLHttpRequest()let url = 'http://localhost:8080/getUserInfo?userName=' + userNamexhr.open('get', url, true)xhr.send()xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}}}</script></head><body>用户名:<input type="text" id="userName" /> <br /><button id="btnLogin">登录</button></body>
</html>

在该文件夹下面安装express:

npm install express

同时创建server.js文件，该文件的代码如下：

var express = require('express')
var app = express()app.get('/getUserInfo/', function (req, res) {var userName = req.query.userNamevar data = {id: 1,userName: userName,gender: '男',}// var result = JSON.stringify(data)// res.writeHead(200, { 'Content-Type': 'application/json' })// res.write(result)// res.end()res.send(data)
})app.listen(8080, function () {console.log('服务器启动')
})

下面启动服务端

同时index.html文件也通过vscode自带的服务器进行访问。

这时会出现如下错误：

Access to XMLHttpRequest at 'http://localhost:8080/getUserNameInfo?name=admin' 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.

通过以上错误可以发现，现在的程序出现跨域的问题，

下面看一下具体的解决方案: CORS，express中使用CORS的解决方案有2种，

CORS只需要向响应头header中注入Access-Control-Allow-Origin，这样浏览器检测到header中的Access-Control-Allow-Origin，则就可以跨域操作了（同源策略不生效）。

Cross-Site Resource Sharing : 跨域资源共享。

1、直接引入cors，解决跨域问题

var express = require('express')
var app = express()
var cors = express('cors')app.use(cors)
app.get('/getUserInfo/', function (req, res) {var userName = req.query.userNamevar data = {id: 1,userName: userName,gender: '男',}// 需要设置响应头res.setHeader('Access-Control-Allow-Origin', '*')// var result = JSON.stringify(data)// res.writeHead(200, { 'Content-Type': 'application/json' })// res.write(result)// res.end()res.send(data)
})app.listen(8080, function () {console.log('服务器启动')
})

2、直接设置响应头，接收跨域请求的处理

var express = require('express')
var app = express()// `CORS`主要的实现方式是服务端通过对响应头的设置，接收跨域请求的处理。
app.all('*', function (req, res) {res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')res.header('Access-Control-Allow-Methods', 'GEt,POST,PUT')res.header('Access-Control-Allow-Headers', 'Content-Type')res.header('Content-Type', 'application/json;charset=utf-8')req.next()})app.get('/getUserInfo/', function (req, res) {var userName = req.query.userNamevar data = {id: 1,userName: userName,gender: '男',}// var result = JSON.stringify(data)// res.writeHead(200, { 'Content-Type': 'application/json' })// res.write(result)// res.end()res.send(data)
})app.listen(8080, function () {console.log('服务器启动')
})

结果：

express使用cors跨域相关推荐

cors跨域资源共享】同源策略和jsonp
在执行下面那段代码的时候,我遇到了一个跨域资源共享的问题 <!doctype html> <html> <head> <meta charset=" ...
spring MVC cors跨域实现源码解析
spring MVC cors跨域实现源码解析名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议.IP.http方法任意一个不同就是跨域. sp ...
CORS跨域实现思路及相关解决方案
CORS跨域实现思路及相关解决方案参考文章: (1)CORS跨域实现思路及相关解决方案 (2)https://www.cnblogs.com/safoie/p/10547788.html 备忘一下.
SpringBoot解决cors跨域问题
2019独角兽企业重金招聘Python工程师标准>>> 前段时间项目在集成sosoapi进行发布后,导致cors跨域接口无法测试访问,用如下代码解决即可 /*** 解决cors跨域问 ...
Spring boot 和Vue开发中CORS跨域问题
1. 遇到的问题: 我用spring-boot 做Rest服务,Vue做前端框架,用了element-admin-ui这个框架做后台管理.在调试的过程中遇到了如下错误: Preflight respo ...
Cors 跨域Access-Control-Allow-Origin
1.Access-Control-Allow-Origin 指定格式 The Origin header field has the following syntax:origin = "O ...
corspost请求失败_vue项目CORS跨域请求500错误，post请求变options请求
vue项目CORS跨域请求500,post请求变options请求,到底是什么情况. 提示:以下内容是一个非专业开发的我对跨域的理解,并不10分准确. 一.先介绍为什么明明发送的是Post请求,为什么 ...
CORS 跨域实现思路及相关解决方案(转：http://www.cnblogs.com/sloong/p/cors.html)
本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况主要用途 Ajax请求跨域资源的异常 CORS 实现思路安全说明 CORS 几种解决方案自定义CO ...
Web API 实现JSONP或者安装配置Cors跨域
前言照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

express使用cors跨域

express使用cors跨域相关推荐

最新文章

热门文章