跨域--理解

跨域常用的几种解决方案

• 使用JSONP,前端加后端，绕过跨域

  前端构造script标签请求url（浏览器会受到同源策略，script不会受同源策略的限制），服务器返回一个函数执行语句，该语句名称通常通过callback的值指定，函数的参数为服务器返回的json数据。该函数在前端执行后即可获取数据

• 代理服务器

  前端开发中测试服务器通过在本机搭建一个服务器，本地服务器再去请求接口服务器，从而绕开了浏览器的同源策略。

• CORS跨域资源共享，后端方案，解决跨域

  原理：浏览器发出一个带options的请求头，服务器对请求进行检查并对响应头做出处理，返回给浏览器。浏览器得到响应头，允许进行运行跨域，再将正真的请求数据发送给服务器，服务器响应数据。

  根据请求的信息分为3中方式：

1. 响应简单请求：

   要求：

   - 请求方式为：get/post

   - 没有自定义请求头

   - Content-Type:application/x-www-form-urlencoded,multipart/form-data,text/plain之一，如果你带有json参数，Content-Type会自动改变成application/json，

   解决方案：

   //后端响应头中添加
   res.setHeader('Access-Control-Allow-Origiin',''你发送过来的源'');
              

2. 响应preflight请求，需要响应浏览器发出的options请求（预检请求），并更具情况设置响应头

   如果ajax需要在响应头中添加X-Token则在服务器端需要允许X-Token允许发送

   //index.html
   axios.get("http://localhost:3000/users",{headers:{X-Token:"abc"}})
              

   //服务器端
   res.writeHead(200,{
   'Access-Control-Allow-Origiin',''http://localhost:3000'',
   'Access-Control-Allow-Headers': "X-Token,Content-Type",//请求中携带了X-Token
   "Access-Control-Allow-Methods: "GET,PUT,POST",//把你允许跨域的请求方式全部写上
   'Access-Control-Allow-Credentials': 'true' //如果想在请求头中加cookie时，加上
   });
              

3. 如果需要携带cookie信息，则必要在响应头中设置为可信任的

   //预检options和/user接口中均添加
   res.setHeader('Access-Control-Allow-Credentials', 'true');