jquery + node 通过 CORS 实现跨域访问,支持cookie和自定义header
跨域有多种方式,现在的情况看来还是CORS更适合一些,有很多优点,比如浏览器正式支持、支持post、可以控制跨域访问的网站等。
我们来看看node如何实现cors方式的跨域。在网上找到了一些代码,考过来之后运行报错,可能这个是在express里面的写法吧,那么原生的写法是什么样子的呢?又找了半天,并且经过测试得到了原生的写法:
express的写法:
---app.js---
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
else next();
});
node原生写法:
var http = require("http"); http.createServer(function (req, res) { var a={
"a1":"www"
}; // 获得客户端的Cookie
var Cookies = {};
req.headers.cookie && req.headers.cookie.split(';').forEach(function( Cookie ) {
var parts = Cookie.split('=');
Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || '' ).trim();
});
console.log(Cookies); //获取自定义头
console.log(req.headers.xtoken); // 向客户端设置一个Cookie
res.setHeader('Set-Cookie','myCookie2=test'); //res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8050"); //带cookie的话,不能写*
res.setHeader("Access-Control-Allow-Credentials", true); //允许带 cookie
res.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With,xToken");
res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.setHeader("X-Powered-By",' 3.2.1');
res.writeHeader(200, {'Content-Type': 'application/json'}); if(req.method=="OPTIONS"){
/*让options请求快速返回*/
res.end();
}
else
{
res.write(JSON.stringify(a));
res.end();
} } }).listen(8080);
需要先用 setHeader 进行设置,最后再用 writeHeader 进行设置。这样就可以了。
还有一些小地方,设置不好的话很容易报错。翻来覆去调试了好久才好。
然后就是客户端的写法了,由于客户端使用的框架不同,设置方式也有点差别,这里先介绍一下比较基本的jQuery的方式。
$.ajax({
type: "POST", //post方式
dataType: "JSON", //json格式的数据
cache: false, //客户端不缓存
headers: { //自定义头
xtoken: "1234qwert"
},
xhrFields: {
//允许跨域访问时添加cookie
withCredentials: true //true "Access-Control-Allow-Origin" 不能写* ;false可以写 *
},
crossDomain: true,
url: "http://127.0.0.1:8080/1234",
data: {"a":"11"}, //json格式的数据
//timeout: 2000,
error: function (request, textStatus, errorThrown) { //访问失败,自动停止加载动画,并且给出提示
alert("提交的时候发生错误!"); }, success: function (data) {
$("#div").html(data.a1); }
});
这里的 xhrFields 设置,折腾半天,找了好久终于搞定了。其实只需要在后端加一行代码就行。
另外用了自定义头,客户端会自动发起两次请求。就是说你的代码之ajax了一次,但是浏览器会发起两个请求,后端会收到两个请求,所以有了
if(req.method=="OPTIONS") res.send(200); 这样的判断。
参考目录
1、node的原生 header: https://www.cnblogs.com/jay--zhang/p/6229139.html
2、node 接收 自定义 header
作者:zding92
来源:CSDN
原文:https://blog.csdn.net/u011481543/article/details/79582555
3、解决cookie的问题 :https://www.jb51.net/article/137278.htm
jquery + node 通过 CORS 实现跨域访问,支持cookie和自定义header的更多相关文章
- System.Web.Http.Cors配置跨域访问的两种方式
System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...
- 聊一下,前后分离后带来的跨域访问和cookie问题
在谈前后分离前,我们先看看什么是前后一体的.当我们用javaweb开发网站时,最终我们渲染的jsp或者springthymeleaf.我们的页面其实是WEB-INFO或者templates下.当用户请 ...
- Web Api 2(Cors)Ajax跨域访问
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题
客服端: 在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
- 在dotnet core web api中支持CORS(跨域访问)
最近在写的Office add-in开发系列中,其中有一个比较共性的问题就是在add-in的客户端脚本中访问远程服务时,要特别注意跨域访问的问题. 关于CORS的一些基本知识,请参考维基百科的说明:h ...
- CORS解决跨域访问问题
简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. Tomcat下的配置 下载cors-filter-1.7.jar,java-property-utils-1.9.jar [下载 ...
- jquery ajax怎么使用jsonp跨域访问
在项目中使用接口的比较多,在客户端跨域访问,jquery中只能使用jquery ajax的jsonp方法. 值得注意的是,jQuery.ajax()只支持get方式的跨域,post的方式是不支持的.& ...
随机推荐
- Neo4j 第九篇:查询数据(Match)
Cypher使用match子句查询数据,是Cypher最基本的查询子句.在查询数据时,使用Match子句指定搜索的模式,这是从Neo4j数据库查询数据的最主要的方法.match子句之后通常会跟着whe ...
- Git在提交代码时出现的fatal: Authentication failed的问题
git push origin master remote: Incorrect username or password ( access token ) fatal: Authentication ...
- TensorFlow、numpy、matplotlib、基本操作
一.常量的定义 import tensorflow as tf #类比 语法 api 原理 #基础数据类型 运算符 流程 字典 数组 data1 = tf.constant(2,dtype=tf.in ...
- php 除10取整,取十位数前面一个数字,百位前两个数字
需求:php 除10取整,取十位数前面一个数字,百位前两个数字,并把大于2的加红显示 例:0-9,10-19,20-29,30-39,110-119对应为:0 1 2 3 11 实现主要方法:$num ...
- RDD源码分析
RDD源码解析 一. RDD.scala - Resilient Distributed Dataset (RDD) 弹性分布式数据集 弹性: 体现在计算上面 - the basic abstract ...
- odoo10学习笔记七:国际化、报表
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189297.html 一:国际化(模块翻译) 我们开发的模块要国际化通用,就要开发出不同的语言支持. 这些 ...
- R 基于朴素贝叶斯模型实现手机垃圾短信过滤
# 读取数数据, 查看数据结构 df_raw <- read.csv("sms_spam.csv", stringsAsFactors=F) str(df_raw) leng ...
- 简单C语言程序
#include<stdio.h> int main(void) { /* 计算两个时间的时间差 */ int hour1, minute1; int hour2, minute2; pr ...
- 使用Visual Studio学习C语言
注明:安装的是社区版,只写大部分步骤,做笔记之用.详细还需要看B站教程,https://www.bilibili.com/video/av59608520 一.安装软件 1.安装Visual Stud ...
- pdfium 保存pdf
// // Created by svenj on 2019/2/3. // extern "C" { #include <unistd.h> #include < ...