如何通过axios.js发送带有令牌的身份验证标头?我尝试了一些没有成功的事情,例如:
const header = `Authorization: Bearer ${token}`;
return axios.get(URLConstants.USER_URL, { headers: { header } });
Run Code Online (Sandbox Code Playgroud)
给我这个错误:
XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.
Run Code Online (Sandbox Code Playgroud)
我设法通过设置全局默认设置来使其工作,但我猜这不是单个请求的最佳选择:
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
Run Code Online (Sandbox Code Playgroud)
更新:
科尔的回答帮助我找到了问题所在.我正在使用django-cors-headers中间件,默认情况下已经处理了授权头.
但我能够理解错误消息并修复了我的axios请求代码中的错误,这应该是这样的
return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });
Run Code Online (Sandbox Code Playgroud) 模拟按钮单击似乎是一个非常简单/标准的操作.然而,我无法在Jest.js测试中使用它.
这是我试过的(也使用jquery),但它似乎没有触发任何东西:
import { mount } from 'enzyme';
page = <MyCoolPage />;
pageMounted = mount(page);
const button = pageMounted.find('#some_button');
expect(button.length).toBe(1); // it finds it alright
button.simulate('click'); // nothing happens
Run Code Online (Sandbox Code Playgroud) 我需要帮助诊断和修复此错误:
"Error: only one instance of babel-polyfill is allowed"
Run Code Online (Sandbox Code Playgroud)
我的package.json中有以下内容:
"devDependencies": {
"babel-core": "^6.23.1",
"babel-jest": "^19.0.0",
"babel-loader": "^6.3.2",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0" ...
"dependencies": {
"babel-polyfill": "^6.23.0" ...
Run Code Online (Sandbox Code Playgroud)
这个和我的webpack配置中的这个输入行:
entry: ["babel-polyfill", path.resolve(APP_PATH, 'index')],
...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
// specify that we will be dealing with React code
presets: ['react', 'es2015']
}
}
]}
Run Code Online (Sandbox Code Playgroud) 我有一个 React 组件,它整体上是可点击的,但内部也包含按钮。
所以像
<Link to={'/path1'}>
...
<Link to={'path2'} />
...
</Link>
Run Code Online (Sandbox Code Playgroud)
这是我想要的行为,但我收到此警告:
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See SearchResult > Link > a > ... > Link > a.
Run Code Online (Sandbox Code Playgroud)
我应该如何认真对待这个问题,解决方法是什么?
我正在尝试使用redux-form字段(与Material-ui一起使用)和验证。当我离开该字段(即onBlur)时,似乎显示了错误消息。我想要实现的是在用户键入时即时进行验证,并在onChange事件上显示错误消息。我将如何实现这种行为?
import { TextField } from 'redux-form-material-ui';
import { Field, reduxForm } from 'redux-form';
const MyForm = (props) => (
<form>
<div className="form-group">
<Field
name="foo"
type="text"
hintText="Foo"
component={TextField}
/>
</form>
);
export default reduxForm({
form: 'MyForm',
validate
})(MyForm);
Run Code Online (Sandbox Code Playgroud) 有谁知道如何使用 Django REST 后端对 (React) 前端进行集成测试。我能够使用 Nightwatch.js 和伪造的服务器 API 为前端编写功能测试。我还可以单独测试 Django REST API - Django 提供了一个 LiveServerTestCase,它可以使用测试数据库为您启动测试服务器并在最后销毁它。我想知道是否有可能以某种方式使用/设置可由前端调用的 Django 测试服务器(即 Nightwatch 测试)。我对如何解决这个问题的其他想法持开放态度。
testing django integration-testing django-rest-framework reactjs
当触发onBlur时,如何规范化redux-form字段的值.我试过以下,但似乎没有用:
const normalizeAmount = (node) => {
const newValue = node.target.value;
return `--${newValue}--`;
};
render() {
const { handleSubmit, pristine, invalid, submitting, error, blur } = this.props;
return (
<form onSubmit={handleSubmit(submit)}>
<div name="form-container">
<Field
name="foo"
component={CustomInput}
onBlur={blurValue => blur(normalizeValue(blurValue))}
/>
...
);
Run Code Online (Sandbox Code Playgroud) 我正在使用 React、Redux 和 React-router,并希望以下用例能够工作:
如何使用每个项目的 slug 创建一个 url?现在我只有一个固定的
<Route path="/item" component={ItemPage} />
Run Code Online (Sandbox Code Playgroud)
我想要的是
<Route path="/<slug>" component={ItemPage} />
Run Code Online (Sandbox Code Playgroud)
只有当您从另一个页面导航到该页面时才知道 slug。
我遇到的另一个问题 - 页面的所有内容在刷新时消失。这是因为我通过 state 将 item id 传递给了 ItemPage,并且在刷新后该 id 不再设置在 state 中。
也许更一般地说,实现上述行为的方法是什么?这似乎是一个常见的用例,我找不到有关如何操作的好参考。
我正在尝试使用DRF设置CursorPagination以获取事务记录列表(按创建日期排序).我无法弄清楚如何进行初始请求,因为我在那个阶段还不知道光标.令人惊讶的是,我找不到这样的例子.
另外,有没有办法用CursorPagination设置每个请求的页面大小,PageNumberPagination有page_size_query_param和max_page_size,它们不适用于CursorPagination.
这是我到目前为止所拥有的:
class RecordPagination(pagination.CursorPagination):
page_size = 10
class RecordsOverview(generics.ListAPIView):
serializer_class = RecordSerializer
logging_methods = ['GET']
queryset = Record.objects.all()
pagination_class = RecordPagination
# Note: this is my way to dynamically set the page size,
# it is totally hacky, so I'm open to suggestions
# is_number method is left out for brevity
def get(self, request, *args, **kwargs):
page_size = request.GET.get('page_size', '')
if self.is_number(page_size) and int(page_size) > 0:
self.paginator.page_size = int(page_size)
return self.list(request, *args, **kwargs)
Run Code Online (Sandbox Code Playgroud)
然后在我的测试中我做了一个GET请求:
response …Run Code Online (Sandbox Code Playgroud) reactjs ×5
javascript ×2
redux-form ×2
testing ×2
axios ×1
babel ×1
django ×1
enzyme ×1
jestjs ×1
material-ui ×1
pagination ×1
react-router ×1
redux ×1
webpack ×1