javascript - 获取请求的 400(错误请求),其参数是 url
问题描述
我正在尝试使用参数执行获取请求,该参数实际上是一个字符串,但该字符串是一个 url
所以我得到这个错误:
react-adal.js:50 OPTIONS https://abc-app.azurewebsites.net/api/Page/https://abcde.sharepoint.com/sites/Site1 400 (Bad Request)
我的脚本是这样的:
import React, { Component } from 'react';
import { Row, Col, Tabs, Menu, Dropdown, Button, Icon, message } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { Cascader } from 'antd';
import { adalApiFetch } from '../../adalConfig';
export default class extends Component {
constructor(props) {
super(props);
this.state = {options:[]};
this.loadData = this.loadData.bind(this);
}
componentDidMount() {
adalApiFetch(fetch, "/SiteCollection", {})
.then(response => response.json())
.then(json => {
console.log(json);
const firstLevelOptions = json.map(post => ({
value: post.Url,
label: post.Title,
isLeaf: false
}));
this.setState({
options: firstLevelOptions
});
});
}
onChange = (value, selectedOptions) => {
console.log("value:", value, "selectedOptions", selectedOptions);
}
loadData = (selectedOptions) => {
console.log("loaddata", selectedOptions);
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
const options = {
method: 'get',
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
};
adalApiFetch(fetch, "/Page/"+targetOption.value, options)
.then(response => response.json())
.then(json => {
targetOption.loading = false;
console.log(json);
const secondLevelOptions = json.map(comment => ({
value: comment.id,
label: comment.body,
isLeaf: true
}));
targetOption.children = secondLevelOptions;
this.setState({
options: [...this.state.options],
});
}
);
};
render(){
const { rowStyle, colStyle, gutter } = basicStyle;
const TabPane = Tabs.TabPane;
return (
<div>
<LayoutWrapper>
<PageHeader>{<IntlMessages id="pageTitles.PageAdministration" />}</PageHeader>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={12} sm={12} xs={24} style={colStyle}>
<Box
title={<IntlMessages id="pageTitles.siteCollectionsTitle" />}
subtitle={<IntlMessages id="pageTitles.siteCollectionsTitle" />}
>
<ContentHolder>
<Cascader
options={this.state.options}
loadData={this.loadData}
onChange={this.onChange}
changeOnSelect
/>
</ContentHolder>
</Box>
</Col>
</Row>
</LayoutWrapper>
</div>
);
}
}
我的 web api 代码是这样的:
[Authorize]
public class PageController : ApiController
{
[HttpGet]
public async Task<ListItemCollection> Get(string sitecollectionUrl)
{
var tenant = await TenantHelper.GetActiveTenant();
var siteCollectionStore = CosmosStoreFactory.CreateForEntity<TenantManagementWebApi.Entities.SiteCollection>();
await siteCollectionStore.RemoveAsync(x => x.Title != string.Empty); // Removes all the entities that match the criteria
string domainUrl = tenant.TestSiteCollectionUrl;
string tenantName = domainUrl.Split('.')[0];
string tenantAdminUrl = tenantName + "-admin.sharepoint.com";
KeyVaultHelper keyVaultHelper = new KeyVaultHelper();
await keyVaultHelper.OnGetAsync(tenant.SecretIdentifier);
using (var context = new OfficeDevPnP.Core.AuthenticationManager().GetSharePointOnlineAuthenticatedContextTenant(sitecollectionUrl, tenant.Email, keyVaultHelper.SecretValue))
{
var pagesLibrary = context.Web.GetPagesLibrary();
CamlQuery query = CamlQuery.CreateAllItemsQuery(100);
var pages = pagesLibrary.GetItems(query);
return pages;
};
}
}
解决方案
调用 api 时,您必须将发送的 URL 编码为参数:
adalApiFetch(fetch, "/Page/"+encodeURIComponent(targetOption.value), options)
并且可能您需要在后端对其进行解码。
推荐阅读
- c# - 在 ASP.NET Web API 2 中,如何跨 JSON 序列化保留对象引用?
- ios - 在 ios 中为 pjsip 语音通话启用蓝牙
- python-3.x - Python:如何从当前时间开始运行一些特定的代码片段 10 分钟?
- python - 无法剥离熊猫数据框列中的对象
- css - 允许多个手风琴同时打开
- cookies - 不知道什么是 gs gu gw cookie
- python - 在列表中寻找下一个障碍
- php - 如何使用学说(Symfony 4)从 mysql 数据库中获取数据到数据表中?
- javascript - React Native Flatlist 不会在 PureComponent 上重新渲染
- crystal-lang - 如何在 kemal 俚语中使用 content_for