问题一:项目A通过Ajax访问项目B的接口,获取json数据,项目B采用Node+Express技术栈。项目A可能遇到跨域访问控制问题。

问题二:vue-resource 能够跨域,一般使用jsonp,但是当需要发送大量的参数到服务器的时候,需要使用post请求.本文讲述跨域post请求,

问题三:报错如下:XMLHttpRequest cannot load http://localhost:7777/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

解决方法:

服务器后端需要设置 Access-Control-Allow-Origin 为 *

解决代码如下:

var express = require('express');
var app = express();
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.use('/', index);
app.listen();
console.log('Listening on port 3000...');

Access-Control-Allow-Origin 
浏览器的确发出了请求,只有当目标页面的response中,包含了 Access-Control-Allow-Origin 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。

前端Vue页面设置:

一定要设置 {emulateJSON: true},不然跨域不成功. 
如果Web服务器无法处理编码为application/json的请求,你可以启用emulateJSON选项。启用该选项后,请求会以application/x-www-form-urlencoded作为MIME type,就像普通的HTML表单一样

this.$http.post('http://localhost:7777/login',data,{emulateJSON:true}).then(res =>
{
console.log(res.status,res.statusText);
alert("success");
},res=>{
console.log('error');
alert('error')
}
)

Node+Express的跨域访问控制问题:Access-Control-Allow-Origin的更多相关文章

  1. 解决NodeJS+Express模块的跨域访问控制问题:Access-Control-Allow-Origin

    在一个项目上想用NodeJS,在前端的js(http://localhost/xxx)中ajax访问后端RestAPI(http://localhost:3000/….)时(Chrome)报错: XM ...

  2. vue+nodejs+express解决跨域问题

    nodejs+express解决跨域问题,发现网上的大部分都是误导人,花了不少时间,终于弄懂了, 我在vue+nodejs+express+mongodb的项目里面,发现本地用vue代理正常调用远程的 ...

  3. 【windows 访问控制】七、window 访问控制编辑器(Access Control Editor)

    window 访问控制编辑器(Access Control Editor) 右键(文件.目录.程序)>选择属性>安全>高级   进入访问控制编辑器

  4. Access control allow origin 简单请求和复杂请求

    原文地址:http://blog.csdn.net/wangjun5159/article/details/49096445 错误信息: XMLHttpRequest cannot load http ...

  5. node作为中间层 —> 跨域请求java后台接口(使用http-proxy-middleware中间件)

    情景:利用node的express 作为中间层,跨域调取java后台接口,由于java接口对session有判断,因此每次请求都必须在req的headers中需要带上cookie,否则接口报500错误 ...

  6. NODE中解决跨域请求的问题

    1.Node Express 解决请求跨域请求 标签(空格分隔): 跨域 1是Access-Control-Allow-Origin 允许的域 2是Access-Control-Allow-Heade ...

  7. node下的跨域传递cookie

    研究背景: 最近有一位朋友找工作,需要面试,涉及到面试就涉及面试题,于是我想起来鄙人之前面试被问到的一个跨域传递cookie的问题.搜索了相关资料,但自己不敲一下肯定是不足以让人信服的. 我用node ...

  8. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  9. vue-cli3.0+node.js+axios跨域请求session不一样的问题

    一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...

随机推荐

  1. 在 JSDOM v11 中使用jQuery

    在JSDOM v11中使用jQuery 从v10开始,jsdom提供了更灵活的API. https://swashata.me/blog/use-jquery-jsdom-v11/ const tes ...

  2. mysql联合主键自增、主键最大长度小记

    前言 一. 联合主键自增问题 今天上午闲来无事翻看了下数据库分类表的设计,看到这样一幕: 当时我好奇的是怎么cateId自增会存在重复值的问题,然后翻看了下主键是由siteId和cateId组成.所以 ...

  3. 小程序之map地图上不能在覆盖层

    问题:页面上有一个地图功能,地图上面有两个按钮,是需要覆盖在地图上的,在小程序编辑器中显示是没问题的,但是扫码测试后发现在手机上不显示这两个按钮 解决方法:使用cover-viwe标签包裹一下就可以了

  4. colgroup和col的区别

    转载自:http://blog.csdn.net/carefree31441/article/details/3291397 colgroup和col一般出现在表格当中定义表格单独列的任意属性col能 ...

  5. nginx启动报错:Job for nginx.service failed. See 'systemctl status nginx.service' and 'journalctl -xn' fo

    一.背景 这个错误在重启nginx或者启动nginx的时候,经常会出现.我之前也一直认为出现这个错误是因为有程序占用了nginx的进程.但是知其然不知其所以然.每次报错都有点懵逼,所以这边一步步排查错 ...

  6. Spring Boot的数据访问 之Spring Boot + jpa的demo

    1. 快速地创建一个项目,pom中选择如下 <?xml version="1.0" encoding="UTF-8"?> <project x ...

  7. .NetCore Session.Redis

    首先创建ASP.NET CORE Web项目,然后按如下顺序操作.1.添加nuget程序包: Microsoft.AspNetCore.Session; Microsoft.AspNetCore.Da ...

  8. hybrid cordova+vue开发APP(一) 环境搭建

    没有选择react-navite,而选择cordova+vue2.x,是因为react-navite有学习成本,并且cordova+vue2.x程序员 可以直接上手,性能上可以满足需求,成本低,开发速 ...

  9. 用sql plus时,显示协议适配器错误

    1.在桌面右击我的电脑图标——选择栏中选择管理,点击并进入计算机管理 2.进入计算机管理界面后,点击服务和应用程序,然后在右边栏目选择服务,双击进入服务进程 3.进入服务进程后,鼠标下滑,一直下滑找到 ...

  10. Linux 各种软件的安装-mediawiki + wordpress篇

    php apache mysql 三剑客安装好后,可以愉快地安装一些成熟的web应用啦,比如wordpress可以当做自己的笔记本,mediawiki整理知识库. 首先是mediawiki,网上说不错 ...