Angular 6 与 API 在 Codeigniter

Question

我想使用 Angular 6 和 NGXS 作为前端，Codeigniter 3 用于后端。我怎样才能将两者结合起来，从 Angular NGXS

中的 CI 调用 api

我尝试了以下步骤：

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

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 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
  }
}

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

希望对您有所帮助！

Angular 6 与 API 在 Codeigniter

Angular 6 with API in Codeigniter

angular

ngxs