前端跨域请求tp5后端出现错误:It does not have HTTP ok status

Question

第一次遇到这个问题

错误代码:

Access to XMLHttpRequest at 'http://localhost:8081/public/getContent' from origin 'http://localhost:19601' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

但是,我试过用同一个项目里面的其他app的接口测试,却可以正常返回数据,我的跨域配置应该没问题

tp5跨域配置:

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:*");
header("Access-Control-Allow-Credentials",true);
header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,X_Requested_With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");

而且出现错误的app的接口中,需要参数的接口都会出现这个错误,不需要参数的是可以正常返回数据的

毫无头绪,各位路过的大佬指点一下

ps:国庆节快乐!

---

Answer 1

在路由或路由组调用 allowCrossDomain() 如果需要其他 header ，也一并调用。

Answer 2

经过查看代码发现:是前端那边的vue项目没有使用 qs 将参数stringify,经过处理后就能正常进行请求了

Answer 3

今天我也碰到了这个问题搞了半天，最后看到有人说iview 得上传有BUG, 然后就换elm,直接复制样例，添加 action,和name就ok了，

<template>
    <el-upload
  class="upload-demo"
  name="excel"
  action="http://localhost/index.php/bases/basedata/excel"
  :on-change="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
</el-upload>
</template>

<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      }
    }
  }
</script>

后来发现其实这个

错误其实一直是因为tp5 得接口有语法错误，响应什么都不给你返回，就只能在控制台看到跨域得错误，最后iview 上传组件应该是没问题的，还没去试