Node+Express的跨域访问控制问题:Access-Control-Allow-Origin

问题一:项目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(3000);
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')
            }
          )
原文地址:https://www.cnblogs.com/Joans/p/7205571.html