angular - Angular 6 与 Codeigniter 中的 API

问题描述

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

我尝试了以下步骤：

使用命令创建 Angular 项目：ng new {project name}
在 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);
        });
    }
}

标签： angularngxs

由于您正在使用angular-cli您可能会使用代理来绕过这样的 CORS 问题，

proxy.conf.json使用以下内容在项目的根目录中创建一个文件

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

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

希望这可以帮助！

angular - Angular 6 与 Codeigniter 中的 API

问题描述

解决方案

推荐阅读