Angular2 - http：// localhost：4200 /附加api调用为什么？

Question

在app = Flask(__name__) app.config["LOGGER_NAME"] = ' '.join([app.logger_name, socket.gethostname(), instance_id]) app.config["SQLALCHEMY_DATABASE_URI"] = config.sqlalchemy_database_uri app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False app.config["SQLALCHEMY_POOL_TIMEOUT"] = 30 教程之后开始学习dimens.xml。我正在创建一个创建请求，URL非常好，参数很好。但我仍然感到困惑，为什么angular2附加了我的heroes调用，并且由于这一点，URL完全被更改，并且调用失败。请详细说明这个问题。我google了很多，但可以找到原因。

我的创建方法

http://localhost:4200/

Answer 1

您需要为您的网址添加协议。否则，它是一个相对URL：

.post('http://localhost/usmanProject/api/web/v1/users?access-token=n-EJtZiejtz5RSVWe-U14G4kCnPWMKf0', user, { headers: this.headers })

Answer 2

http://localhost:4200/是页面最初加载的网址。

你应该添加像

这样的完整网址

.post('//localhost:4200/usmanProject/api/web/v1/users?access-token=n-EJtZiejtz5RSVWe-U14G4kCnPWMKf0', user, { headers: this.headers })

或

.post('http://localhost:4200/usmanProject/api/web/v1/users?access-token=n-EJtZiejtz5RSVWe-U14G4kCnPWMKf0', user, { headers: this.headers })

或根本没有主持人部分

.post('usmanProject/api/web/v1/users?access-token=n-EJtZiejtz5RSVWe-U14G4kCnPWMKf0', user, { headers: this.headers })

Answer 3

遇到了这个问题，并通过创建app.settings.ts文件来解决问题，该文件将包含从其提供api的终点

def load_matlab_csv(filename):
    """Read CSV written by matlab tablewrite into DataFrames

    Each entry in the table can be a scalar or a variable length array.
    If it is a variable length array, then Matlab generates a set of
    columns, long enough to hold the longest array. These columns have
    the variable name with an index appended.

    This function infers which entries are scalars and which are arrays.
    Arrays are grouped together and sorted by their index.

    Returns: scalar_df, array_df
        scalar_df : DataFrame of scalar values from the table
        array_df : DataFrame with MultiIndex on columns
            The first level is the array name
            The second level is the index within that array
    """
    # Read the CSV file
    tdf = pandas.read_table(filename, sep=',')
    cols = list(tdf.columns)

    # Figure out which columns correspond to scalars and which to arrays
    scalar_cols = [] # scalar column names
    arr_cols = [] # array column names, without index
    arrname2idxs = {} # dict of array column name to list of integer indices
    arrname2colnames = {} # dict of array column name to list of full names

    # Iterate over columns
    for col in cols:
        # If the name ends in "_" plus space plus digits, it's probably
        # from an array
        if col[-1] in '0123456789' and '_' in col:
            # Array col
            # Infer the array name and index
            colsplit = col.split('_')
            arr_idx = int(colsplit[-1])
            arr_name = '_'.join(colsplit[:-1])

            # Store
            if arr_name in arrname2idxs:
                arrname2idxs[arr_name].append(arr_idx)
                arrname2colnames[arr_name].append(col)
            else:
                arrname2idxs[arr_name] = [arr_idx]
                arrname2colnames[arr_name] = [col]
                arr_cols.append(arr_name)

        else:
            # Scalar col
            scalar_cols.append(col)

    # Extract all scalar columns
    scalar_df = tdf[scalar_cols]

    # Extract each set of array columns into its own dataframe
    array_df_d = {}
    for arrname in arr_cols:
        adf = tdf[arrname2colnames[arrname]].copy()
        adf.columns = arrname2idxs[arrname]
        array_df_d[arrname] = adf

    # Concatenate array dataframes
    array_df = pandas.concat(array_df_d, axis=1)

    return scalar_df, array_df

scalar_df, array_df = load_matlab_csv(filename)

然后创建服务并导入app.settings，如下所示

export class AppSettings {
   public static get FOLDER_ENDPOINT(): string {
     return 'http://127.0.0.1:8000';
   } 
}

在你的app.component.html中添加一个触发api调用的函数

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import { HttpHeaders } from '@angular/common/http/src/headers';
import { Http, Response, RequestOptions, ResponseContentType } from 
'@angular/http';
import 'rxjs/Rx';
import { AppSettings } from '../app.settings';


@Injectable()
export class FormsubmitService {

constructor(private http: HttpClient) { }

listAll(data: any): Observable<any> {
  return this.http
    .get(`${AppSettings.FOLDER_ENDPOINT}/list-files`);
 }
}

然后在你的app.component.ts中编写你的方法

<button (click)="loadData()" class="btn btn-primary pull-right">load data</button>

Answer 4

您的网址应类似于url：string =“ www.example.com”;

它不应类似于url：string =“'www.example.com'”;