我有一个reactjs应用程序,该应用程序受天蓝色广告保护,还使用了一个WEB API,该API也受天蓝色广告保护。
我基本上想测试一个简单的组件,该组件返回一些字符串,并查看整个数据流是否正常工作。
我的回应者是这样:
import React, { Component } from 'react';
import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
getValues() {
adalApiFetch(fetch, '/values', {})
.then((response) => {
// This is where you deal with your API response. In this case, we
// interpret the response as JSON, and then call `setState` with the
// pretty-printed JSON-stringified object.
response.json()
.then((responseJson) => {
this.setState({ data: JSON.stringify(responseJson, null, 2) })
});
})
.catch((error) => {
// Don't forget to handle errors!
console.error(error);
})
}
fetchData() {
try {
const data = this.getValues();
!this.isCancelled && this.setState({ data });
} catch(error) {
console.log(error);
}
}
componentDidMount(){
this.fetchData();
}
render() {
const { data } = this.state;
const { rowStyle, colStyle, gutter } = basicStyle;
const radioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px'
};
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' }
];
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false }
];
return (
<div>
<LayoutWrapper>
<PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={12} sm={12} xs={24} style={colStyle}>
<Box
title={<IntlMessages id="pageTitles.TenantAdministration" />}
subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
>
<ContentHolder>
<ul>
{data && data.map(item => (
<li>{item.name}</li>
))}
</ul>
</ContentHolder>
</Box>
</Col>
</Row>
</LayoutWrapper>
</div>
);
}
}
我的adalconfig就是这样,替换了真实的导航:
import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';
export const adalConfig = {
tenant: 'a-c220-48a2-a73f-1177fa2c098e',
clientId: 'a-bd54-456d-8aa7-f8cab3147fd2',
endpoints: {
api:'a-abaa-4519-82cf-e9d022b87536'
},
'apiUrl': 'https://a-app.azurewebsites.net/api',
cacheLocation: 'localStorage'
};
export const authContext = new AuthenticationContext(adalConfig);
export const adalApiFetch = (fetch, url, options) =>
adalFetch(authContext, adalConfig.endpoints.api, fetch, adalConfig.apiUrl+url, options);
export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);
但是,在测试时,控制台中出现此错误:
Failed to load https://a-app.azurewebsites.net/api/values: Response for preflight is invalid (redirect)
UI应用程序和Web api应用程序已经在azure AD上注册,并且在webapi清单中我对其进行了编辑以允许隐式授予,并且还添加了unknownClientApplications值以匹配UI应用程序注册ID。
我还授予了客户端应用程序对Azure AD上的Web api应用程序的权限。
答案 0 :(得分:0)
我用*启用了cors,就是这样。