获取请求的 400（错误请求），其参数是 url

Question

我正在尝试执行一个带参数的get请求，参数实际上是一个字符串，但字符串是一个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;

            };
        }

    }

Answer 1

根据路由的配置方式，您最终可能与预期的操作不匹配。

尝试在服务器上使用属性路由来更好地控制该操作的路由。

在WebApiConfig中启用属性路由

//attribute routing
config.MapHttpAttributeRoutes();

//convention-based routes
//...

更新 ApiController 以使用包罗万象的参数

[Authorize]
[RoutePrefix("api/Page")]
public class PageController : ApiController {
    //GET api/Page/https://abcde.sharepoint.com/sites/Site1
    [HttpGet]
    [Route("{*sitecollectionUrl}")]
    public async Task<IHttpActionResult> 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 Ok(pages);
        }
    }
}

Answer 2

在调用 api 时，您必须将发送的 URL 编码为参数：

adalApiFetch(fetch, "/Page/"+encodeURIComponent(targetOption.value), options)

您可能需要在后端对其进行解码。