Angular 6 与 Codeigniter 中的 API

Question

我想将 Angular 6 与 NGXS 用于前端，将 Codeigniter 3 用于后端。如何将两者结合起来，从 Angular NGXS 中的 CI 调用 api

我尝试了以下步骤：

• 使用命令创建 Angular 项目：ng new {项目名称}
• 在 CI 中创建了登录 API
• 安装了 NGXS 商店并更新了 app.module.ts 文件以包含它
• 在 login.state.ts 文件中我添加了以下代码，这给了我以下错误：

对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:4200” 使用权。响应的 HTTP 状态代码为 404

import { State, Action, StateContext, Selector } from '@ngxs/store';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

import { Login } from '../models/Login';
import { LoginUser } from '../actions/login.action';

export class LoginUserModel {
    login: Login[];
}

@State<LoginUserModel>({
    name: 'login',
    defaults: {
        login: []
    }
})
export class LoginState {

    constructor(private http: HttpClient) {}

    @Action(LoginUser)
    authenticate({ getState, patchState }: StateContext<LoginUserModel>, { payload }: LoginUser) {
        this.http.post("http://localhost/CI/api/User/authenticate" , payload ).subscribe(response => {
            console.log("res=>"+response);
        });
    }
}

Answer 1

由于您使用的是angular-cli，您可能会使用代理来绕过此类 CORS 问题，

在项目的根目录下创建一个proxy.conf.json 文件，内容如下

{
  "/api/*": {
    "target": "http://localhost",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

注意：建议仅出于开发目的使用此解决方法，您不应在生产服务器中使用此解决方法。

希望这会有所帮助！