• thinkphp5 关于跨域的一些坑,附上解决办法(比较全面了)


    前几天写过一次,然后被管理员移出首页了,原因是写的不好。。。。哈哈确实也不好,而且我按我自己的博客来重新操作,发现。。。还有有跨域问题!,惭愧惭愧,而且当我重新在百度搜索的时候发现,,,我这文章竟然显示在第一条。。。

    为了不误人子弟,经过各种查找各种搜索,现重新整理出跨域解决方案,我觉得应该是市面上比较详细的了吧,开始:

    项目背景:前端是uniapp开发的h5,后端是tp5,其他语言我觉得应该大同小异,主要是思路,本文就以这俩为例吧

    1、首先在tp5的入口文件:public/index.php 在里面添加三行:

    // [ 应用入口文件 ]
    
    header("Access-Control-Allow-Origin:*");
    header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE");
    header("Access-Control-Allow-Headers:x-requested-with, Referer,content-type,token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");
    // 不用多说,就是上面三行,注意第三行,里面有一个参数:token,这个是为后面自定义header头准备的
    // 定义应用目录 define('APP_PATH', __DIR__ . '/../application/'); // 加载框架引导文件 require __DIR__ . '/../thinkphp/start.php';

    这样就可以了,在tp5的方面就弄完了,没错,就是这么简单~而且一般百度能搜索到的,就是这些~

    一般情况下这样也就行了,但是有的时候还会存在跨域,原因就是前端请求的时候有一个地方需要注意

    2、前端uniapp的网络请求用的是uni.request,不管是uni.request还是jq的ajax,都一样,都需要注意一点,就是请求类型不能是application/json!!

    uni.request({
      url: 'http://test-tp5.io',
      data: {a:1,b:2},
      header: {
    	'content-type': 'application/x-www-form-urlencoded', // 用这个!
    	// 'content-type': 'application/json', 这里是反面举例,一定不要用这个!不信你试试!
    	'token': 'this is token'  // 看到这个token了没有,它在在第一步的第三行出现过~
      },
      method: 'POST',
      success: (res)=> {
        console.log('成功了:',res);
      },
      fail: (res)=>{
        console.log('出错了:',res);
      }
    });
    

    header中所有自定义的参数,都要写在第一步中的第三行里面,要不然就等着跨域吧~

    OK,到这绝大部分到这也就没有问题了~但是!鄙人就是这么的与众不同!没错,当我弄到这的时候!我又跨域了!想哭了~

    一开始我的开发环境是phpstudy,在到这一步的时候,跨域问题已经消失的无影无踪了,然后前几天我换成了docker,然后久违的跨越又来了。。。

    而且跨域的原因是自定义header参数,即如果我把request里面的token参数去掉,请求是正常的,加上就不行了!

    此时经过对比我发现,phpstudy我用的是apache,docker我用的是nginx,而且当我把项目迁到phpstudy的时候就没有跨域问题,此时问题原因显而易见!

    3、经过搜索、测试,现得出在nginx下如何配置跨域的自定义header参数

    在站点配置文件中 location / {} 里面添加下面几行:

    location / {
        if ($request_method = 'OPTIONS') {
                # 【必须】建议在发布环境用域名而不是“星”号
                add_header Access-Control-Allow-Origin '*';
                # Allow-Headers 指定允许的自定义请求头,如用户 Token,而且这些不用写那么多,只写自定义的参数就可以
                add_header Access-Control-Allow-Headers 'token';
                # 一般来说在 POST 请求时因为 Content-Type 的原因在本次 OPTIONS 预请求后,
                # 会再发送的 POST 请求,而 POST 请求是可以正常接收的
                # add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
                # 请求是否携带 Cookie,无需要可忽略。有说该设置为 true 时 Allow-Origin 不可为 '*'
                # add_header Access-Control-Allow-Credentials true;
                # 这个响应 Content-Type 也是根据需要设置(一般情况可以不用设置)
                # add_header Content-Type 'application/json; charset=utf-8';
                # 如下 Content-Length 可忽略,返回状态码根据个人习惯可设置为 200
                add_header Content-Length 0;
                return 204;
            }
         # 没错,为了方便你们对比,上面这些才是要添加的
         # 而且你们可能发现了,我上面有好多注释掉的,因为这些是我在搜索出来的,而且经过我一步步的注释,发现只要一开始的两行和最下面的两行就可以了
    
            if (!-e $request_filename) {
                rewrite  ^(.*)$  /index.php?s=/$1  last;
                break;
            }
    }
    

    至此才是真正的解决了跨域的问题,可能是apache默认配置了的原因,apache不用配置这第三步

    4、为啥还有第4步???

    这第4步算是一个小提醒吧,就是tp程序不要报错。。。因为当tp5抛出异常的时候,会影响你public/index.php中的配置,导致产生跨域~

    tip:不知道这篇文章还能不能回到首页,哈哈~~

  • 相关阅读:
    注册机实现算法
    nginx优化配置服务,快速提升服务器性能,突破100000万高并发不是梦!
    语雀、有道云笔记、滴答清单一键保存文章,剪藏文章chrom、360极速浏览器火狐插件
    超简单!查询自己在CSDN、博客园、简书、知乎、51CTO等平台的百度收录情况
    最全的中文Vscode扩展插件&配置调试&快捷键&格式化方法
    中文汉化atom最美前端开发编辑器插件安装和常用配置&快捷键,5年的使用心得
    加速Github访问,最新地址仅需1步!修改host快速达到2M!
    使用标签link rel="alternate"属性,帮助搜索引擎对不同设备的用户提供不同类型的页面
    JavaScript高级程序设计学习笔记(1)
    idea中多模块项目引入
  • 原文地址:https://www.cnblogs.com/lamplnmp/p/13141689.html
Copyright © 2020-2023  润新知