前端跨域的方案，关于vue+node前后端分离

此文转载：
昨天在做登陆请求的时候，脑子一抽，想试试原生的ajax来请求后台，这时候我就写下了下面的代码,

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                console.log(xhr.responseText)
            } else {
               //错误处理
            }
        }
    }
    xhr.open("post", "http://127.0.0.1:3000");
    xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8'); 
    var postData = {user: "乘风",password:'123456'};   
    xhr.send(postData);

这时候，后台就出现了跨域的错误

XMLHttpRequest cannot load http://127.0.0.1:3000/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

这还不好办嘛，我后台都是我写的，我改改允许的请求地址，不就好了嘛，然后放代码

var express = require("express");
var bodyParser = require('body-parser')
var app = express();

app.use(express.static("./headImg"));
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())
app.post("/", function (req, res) {
    
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', ' GET, POST, PUT,DELETE');
    res.setHeader('Access-Control-Allow-Headers', ' Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie ');
    res.jsonp({
        serverIP: '127.0.0.1',
        name:'乘风',
        github:'https://github.com/Faithree',
        sex:'男',
        examTime:'2017-04-13',
        province:'广东',
        city:'广州',
        country:'中国',
        age:22,
    })
});
app.listen(3000);

可是我怎么试，怎么按f5他还是报错，跨域了，错误跟上面的一样，这时候真是百思不得其解啊,难道作为一名未来的前端工程师，这点小破事我都治不了吗？我还真不信邪了,

首先呢，我的后台我觉得既然设置了允许了来源访问，那肯定不是我后台的问题了,我就改ajax啊，我就把上面的ajax请求改成了xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 这一试,果然好使啊,难道ajax请求不能设置Content-Type的值为application/json？
这时候可能很多朋友就不服了，明明我用jquery ,vue-resource ,axios的post请求，明明写的就是一个对象啊，请求头携带的就是Content-Type的值为application/json,我也是百思不得其解啊,既然找到错误的根源就是这个请求头了，那我们来一探究竟吧

参考mdn里面的一段内容
某些请求不会触发 CORS 预检请求。本文称这样的请求为“简单请求”，请注意，该术语并不属于 Fetch （其中定义了 CORS）规范。若请求满足所有下述条件，则该请求可视为“简单请求”：

(1)使用下列方法之一：

GET
HEAD
POST

（2）HTTP的头信息不超出以下几种字段：

Accept
2 .Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

比如说，假如站点 http://foo.example 的网页应用想要访问 http://bar.other 的资源。这时候就会跨域了.这时候，你后台设置了允许跨域了，也不一定能访问成功,因为分为简单请求和非简单请求，当不满足上面说的那几种请求方式，就会触发浏览器的options预检机制

预检请求

与前述简单请求不同，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。
什么意思呢？

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
下面是一段浏览器的JavaScript脚本。

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                console.log(xhr.responseText)
            } else {
               //错误处理
            }
        }
    }
    xhr.open("post", "http://127.0.0.1:3000");
    xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8'); 
    var postData = {user: "乘风",password:'123456'};   
    xhr.send(postData);

对,没错，终于找到错误了，原来我之前百思不得其解的错误，就是触发了浏览器的预检机制，真特么操蛋，不过为了安全性，还是值得的

那么为了避免触发浏览器的预检机制，我引用上
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
http://www.ruanyifeng.com/blog/2016/04/cors.html

为了避免出发options,我个人收藏了一些vue解决方案

jsonp(这个大家都耳熟能详用都用烂了)
vue-router加上参数(这里有个坑)

this.$http.post('post.php',{
                a:1,
                b:20
            },{
                emulateJSON:true//一定要写上这句话
            }).then(function(res){
                alert(res.data);
            },function(res){
                alert(res.status);
});

AXIOS插件的配置代理(这里有个坑)

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);//一定要序列化，不然axios发送出去也会报异步错误

vue-cli打开build文件夹下面的de-server.js 文件,在里面安装cors中间件(服务器和服务器之间没有跨域问题,个人不常用，详情百度)
在webpack 配置代理

   proxy: {
    '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,//关键是这一句话
        pathRewrite: {
            '^/api': ''
        }
    }
},

总结

其实浏览器请求分为两种，一种是简单请求，一种是非简单请求，每次请求之前浏览器都会预检查options,只有在预检查通过的时候，才会发送正式的请求，当我们用了一些非简单请求的头字段的时候，因为浏览器的安全机制，导致我们的options预检失败了.

引用/参考链接

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
http://www.ruanyifeng.com/blog/2016/04/cors.html

前端跨域的方案，关于vue+node前后端分离

预检请求

总结

引用/参考链接

你可能感兴趣的:(前端跨域的方案，关于vue+node前后端分离)