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


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

    php采用的是yii框架,登录的机制或者调用接口都需要前端传递cookie进去,但是nodejsaxios接口等默认是不会传递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
    })
    

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

  • 相关阅读:
    UITableView移除某行的分割线和让分割线宽度为cell的宽度
    UIButton防止被重复点击
    给View添加手势,防止点击View上其他视图触发点击效果
    自定义导航栏返回时的滑动手势处理
    一个UITableViewCell的简单动画效果
    二维码扫描
    代理的使用
    常用网站
    IOS 自定义View X系列出现一条线条
    UILabel自适应文本,让文本自适应
  • 原文地址:https://www.cnblogs.com/china-flint/p/10308284.html
Copyright © 2020-2023  润新知