CORS跨域资源共享/一些非同源解决方法

定义：向不同服务器发送请求

在另一要被访问的服务器端可以这么写

// 拦截所有请求
app.use((req, res, next) => {
	// 1.允许哪些客户端访问我
	// * 代表允许所有的客户端访问我
	// 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
	res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
	// 2.允许客户端使用哪些请求方法访问我
	res.header('Access-Control-Allow-Methods', 'get,post')
	// 允许客户端发送跨域请求时携带cookie信息
	res.header('Access-Control-Allow-Credentials', true);
	next();
});

方便省事，写在所有路由前面，拦截所有请求

// 拦截所有请求

// app.use((req, res, next) => {

//  // 1.允许哪些客户端访问我

//  // * 代表允许所有的客户端访问我

//  res.header('Access-Control-Allow-Origin', '*')

//  // 2.允许客户端使用哪些请求方法访问我

//  res.header('Access-Control-Allow-Methods', 'get,post')

//  next();

// });

2，访问非同源的数据服务器端解决方案

1）1号网站的客户端向1号网站的服务器端发送请求

 <button id="btn">点击发送请求</button>
    <!-- 获取ajax封装文件 -->
    <script src="./js/ajax.js"></script>
    <script>
        //获取按钮
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            ajax({
                type: 'get',
                url: 'http://localhost:3000/server',
                success: function(data) {
                    console.log(data);
                }
            })
        };
    </script>

2)当1号服务器接收到请求，它又使用resquest方法（需要下载resquest第三方模块）向2号服务器发送请求

app.get('/server', (req, res) => {
	request('http://localhost:3001/cross', (err, response, body) => {
		res.send(body);
	})
});

3）当2号服务器响应时，响应到了1号服务器的客户端

3.cookie复习

cookie一种让服务器端识别的身份卡片

因为服务器端是有状态性的，就是它被访问了之后就完成了使命

cookie使服务器端记住访问它客户端，使下次同一个客户端可以再访问

4.在跨域请求中ajax是否携带cookie的问题

withCredentials属性：涉及到跨域请求时，是否携带cookie，默认值为false

access-contorl-credentials: true 跨域时，携带cookie 

5.当在客户端将form表单发送到服务器端时

常用Formdata方法来将表单的值赋给Formdata对象

var formData =new  FormData (form表单名字 );

再创建ajax，将formdata表单对象通过xhr.send(formdata)发送

6.ajax里的data数据类型分默认型和json型

ajax({

data:{username:zhangsan,age:20},

})

此时contentType: applocation/x-www-form-urlencoded

若ajax要求传送json格式

data：JSON.stringify({username:zhangsan,age:20})

此时contentType:applocaltion/json