Question

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

我尝试了以下步骤：

使用以下命令创建了角度项目：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
  }
}

注意：：建议仅将此变通方法用于开发目的，而不应该在生产服务器中使用它。

希望这会有所帮助！

在Codeigniter中使用API的Angular 6

1 个答案:

在Codeigniter中使用API​​的Angular 6

1 个答案:

在Codeigniter中使用API的Angular 6