使用Ember.JS Store查询Laravel 8 REST API时遇请求阻塞问题

可能原因及对应处理步骤 #

1. 请求被重复触发导致中止 #

Ember Data的store.query在未完成的请求被重复发起时，会自动中止旧请求并抛出AbortError。

• 检查updateModel动作的触发频率，比如是否因组件重渲染、重复事件绑定导致多次调用。可添加防抖控制：

  import { debounce } from '@ember/runloop';
  
  @action updateModel() {
    debounce(this, () => {
      this.store.query('card', { year: { eq: yearVar } })
        .then(cards => this.set('cards', cards))
        .catch(err => console.error('请求失败:', err));
    }, 300); // 300ms内重复触发仅执行一次
  }
  

• 在动作内添加console.log，确认触发次数是否符合预期。

2. CORS跨域配置问题 #

直接在浏览器地址栏访问属于简单请求，但Ember发起的AJAX可能触发预检OPTIONS请求，若Laravel的CORS配置不全，会导致请求被阻塞。

• 检查Laravel项目config/cors.php：
  • paths需包含cards路径
  • allowed_origins添加前端应用域名（如http://localhost:4200）
  • allowed_methods包含GET
  • allowed_headers设为['*']或必要请求头
• 确保HandleCors中间件已加入全局中间件列表（app/Http/Kernel.php的$middleware数组）。

3. Ember适配器配置错误 #

确认Ember的API适配器是否正确指向Laravel服务：

// app/adapters/application.js
import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class ApplicationAdapter extends JSONAPIAdapter {
  host = 'http://10.0.0.0:4000';
  // 若API有前缀如/api，添加namespace: 'api'
}

4. 浏览器CSP安全策略限制 #

检查Firefox控制台是否有CSP相关报错，若Ember应用的CSP未允许向10.0.0.0:4000发起请求，会阻塞请求。

• 修改config/environment.js中的contentSecurityPolicy，将API域名添加到connect-src：

  contentSecurityPolicy: {
    'connect-src': "'self' http://10.0.0.0:4000"
  }
  

5. 请求参数异常 #

确认yearVar变量值是否有效（非undefined/空值），可在store.query前添加console.log(yearVar)验证参数正确性。

内容的提问来源于stack exchange，提问作者ccarlson