【js】【跨域问题】前后端分离的跨域问题

最近在研究nodejs,php的前后端分离相关东西，在调用接口的时候碰到一些跨域的问题，经过一段时间的摸索，总结出来的一些东西

php采用的是yii框架，登录的机制或者调用接口都需要前端传递cookie进去，但是nodejs的axios接口等默认是不会传递cookie的

跨域解析：浏览器请求非本域名的网站资源，如果目标服务器没有设置跨域的情况下，浏览器是会阻止用户的请求的
跨域的解决途径：可以配置后端服务转发的机制绕开跨域问题；也可以直接配置目标服务器的跨域配置

配置转发

搭建一个和前端处于同一域名下的代理服务器，代理服务器把前端的请求转发到真正的目标服务器，接收到的请求再转发给前端

这个一般都是在nginx,apache,iis里面进行转发的

目标服务器的跨域配置

如果不配置代理服务器的话，那应该配置目标服务器的跨域配置了，如果是二次请求（第一次预请求OPTIONS方法，第二次真正请求GET/POST/PUT/DELETE）那应该配置nginx和后端(PHP/JAVA)代码响应了

 ### nginx 配置

location / {

   if ($request_method = 'OPTIONS') {

       add_header Access-Control-Allow-Origin http://xc.com:9599;

       add_header Access-Control-Allow-Headers *;

       add_header Access-Control-Allow-Methods POST,OPTIONS;

       add_header Access-Control-Allow-Credentials true;

       return 204;

   }

   index  test.php ;

   autoindex  on;

   try_files $uri $uri/ /test.php?$args;

}

//php配置 在返回的header里面添加相应头部

header('Access-Control-Allow-Origin:http://frontend.com:9599');//容许跨域的前端站点

header('Access-Control-Allow-Headers:*');//容许传递的header

header('Access-Control-Allow-Credentials:true');//需要校验 配置此项结合NODEJS的配置项可以通过接口传递cookie

//nodejs 配置

const service = axios.create({

   baseURL: process.env.BASE_API, // api 的 base_url

   timeout: 5000, // 请求超时时间

   withCredentials: true // 允许携带cookie

})

巴特西

【js】【跨域问题】前后端分离的跨域问题

配置转发

目标服务器的跨域配置

前后端建议采用同域名不同端口，这样避免不同域名下`cookie`访问问题，配置`Credentials`是为了便于接口传递`cookie`，如果接口不用`cookie`可以不用配置此选项

最新文章

热门文章

巴特西

【js】【跨域问题】前后端分离的跨域问题

配置转发

目标服务器的跨域配置

前后端建议采用同域名不同端口，这样避免不同域名下cookie访问问题，配置Credentials是为了便于接口传递cookie，如果接口不用cookie可以不用配置此选项

最新文章

热门文章

前后端建议采用同域名不同端口，这样避免不同域名下`cookie`访问问题，配置`Credentials`是为了便于接口传递`cookie`，如果接口不用`cookie`可以不用配置此选项