跨域有多种方式,现在的情况看来还是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的更多相关文章

  1. System.Web.Http.Cors配置跨域访问的两种方式

    System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...

  2. 聊一下,前后分离后带来的跨域访问和cookie问题

    在谈前后分离前,我们先看看什么是前后一体的.当我们用javaweb开发网站时,最终我们渲染的jsp或者springthymeleaf.我们的页面其实是WEB-INFO或者templates下.当用户请 ...

  3. Web Api 2(Cors)Ajax跨域访问

    支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示   随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...

  4. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  5. C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题

    客服端:      在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...

  6. 用jQuery与JSONP轻松解决跨域访问的问题【转】

    原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...

  7. 在dotnet core web api中支持CORS(跨域访问)

    最近在写的Office add-in开发系列中,其中有一个比较共性的问题就是在add-in的客户端脚本中访问远程服务时,要特别注意跨域访问的问题. 关于CORS的一些基本知识,请参考维基百科的说明:h ...

  8. CORS解决跨域访问问题

    简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. Tomcat下的配置   下载cors-filter-1.7.jar,java-property-utils-1.9.jar  [下载 ...

  9. jquery ajax怎么使用jsonp跨域访问

    在项目中使用接口的比较多,在客户端跨域访问,jquery中只能使用jquery ajax的jsonp方法. 值得注意的是,jQuery.ajax()只支持get方式的跨域,post的方式是不支持的.& ...

随机推荐

  1. 云原生生态周报 Vol.9| K8s v1.15 版本发布

    本周作者 | 衷源.心贵 业界要闻 1.Kubernetes Release v1.15 版本发布,新版本的两个主题是持续性改进和可扩展性.(https://github.com/kubernetes ...

  2. 【洛谷5438】【XR-2】记忆(数论)

    [洛谷5438][XR-2]记忆(数论) 题面 洛谷 题解 很好的一道题目. 我们首先把所有数的每个质因子的出现次数模二,也就是把最大的完全平方因子给除掉.然后剩下部分一样的就可以产生\(1\)的贡献 ...

  3. Asp.Net Core 中的静态文件

    Asp.Net Core 中的静态文件 在这节中我们将讨论如何使 ASP.NET Core 应用程序,支持静态文件,如 HTML,图像,CSS 和 JavaScript 文件. 静态文件 默认情况下, ...

  4. array list 的特点及几种遍历方法

    public class temp { public static void main(String[] args)throws Exception { //ArrayList 在定义时长度为空 ,在 ...

  5. Navicat for Mysql安装及破解教程

    一.Navicat for Mysql安装 下载链接:https://navicatformysql.en.softonic.com/ 点击download下载. 下载完成后双击安装 二.破解 破解工 ...

  6. 在vue里使用codemirror的两种用法

    这是我自己做的一个左边点击对应的标题,右边显示相应代码的一个功能.代码显示这里用的是vue-codemirror插件. 第一种用法: 1.安装:npm install vue-codemirror - ...

  7. RVZicsr指令集

    Riscv中每个硬件线程(hart)有4096个独立地址空间的状态寄存器.我们可以通过Zicsr指令读写csr寄存器.总共有6条csr读写指令,这些指令之前都在RV32I/RV64I基础指令集里面,在 ...

  8. SpringMVC 之 上传文件

    一.需求: 利用SpringMVC实现上传文件的功能 二.思路: 1.我们可以在SpringMVC中,通过配置一个MultipartResolver来上传文件. 2.通过MultipartFile f ...

  9. 动态样式语言less初识

    资料参考与http://lesscss.cn/ Bootstrap--(less)下载安装配置 http://lesscss.cn Less使用两种方法 (1)在客户端使用LESS--学习 编写 x. ...

  10. IDEA使用maven搭建spring项目

    spring框架 Spring框架是由于软件开发的复杂性而创建的.Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spring的用途不仅仅限于服务器端的开发.从简单 ...