小编foo*_*bar的帖子

如何使用axios发送授权标头

如何通过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)

javascript axios

74
推荐指数
6
解决办法
12万
查看次数

在Jest中模拟按钮单击

模拟按钮单击似乎是一个非常简单/标准的操作.然而,我无法在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)

javascript testing jestjs enzyme

56
推荐指数
4
解决办法
8万
查看次数

"只允许一个babel-polyfill实例"错误

我需要帮助诊断和修复此错误:

"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)

babel reactjs webpack babel-polyfill

12
推荐指数
3
解决办法
1万
查看次数

validateDOMNesting 警告反应

我有一个 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)

我应该如何认真对待这个问题,解决方法是什么?

reactjs

9
推荐指数
1
解决办法
2万
查看次数

在redux形式的onChange上显示错误消息

我正在尝试使用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)

reactjs material-ui redux-form

5
推荐指数
1
解决办法
1467
查看次数

React 前端与 Django REST 后端的集成测试

有谁知道如何使用 Django REST 后端对 (React) 前端进行集成测试。我能够使用 Nightwatch.js 和伪造的服务器 API 为前端编写功能测试。我还可以单独测试 Django REST API - Django 提供了一个 LiveServerTestCase,它可以使用测试数据库为您启动测试服务器并在最后销毁它。我想知道是否有可能以某种方式使用/设置可由前端调用的 Django 测试服务器(即 Nightwatch 测试)。我对如何解决这个问题的其他想法持开放态度。

testing django integration-testing django-rest-framework reactjs

5
推荐指数
1
解决办法
1401
查看次数

规范化LTl上的redux-form字段值

当触发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)

redux-form

4
推荐指数
1
解决办法
2978
查看次数

使用动态确定的 slug 将路由反应到页面

我正在使用 React、Redux 和 React-router,并希望以下用例能够工作:

  • 从显示条目列表的页面(每个条目都有一个唯一的 id 和一个已知的 slug)
  • 当您单击一个条目时,您将被带到该条目的页面
  • 该页面是动态加载的 - 使用页面的 id 发送 ajax 请求,并根据请求的输出填充所有内容。

如何使用每个项目的 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 中。

也许更一般地说,实现上述行为的方法是什么?这似乎是一个常见的用例,我找不到有关如何操作的好参考。

reactjs react-router redux

4
推荐指数
1
解决办法
7875
查看次数

DRF光标分页示例

我正在尝试使用DRF设置CursorPagination以获取事务记录列表(按创建日期排序).我无法弄清楚如何进行初始请求,因为我在那个阶段还不知道光标.令人惊讶的是,我找不到这样的例子.

另外,有没有办法用CursorPagination设置每个请求的页面大小,PageNumberPagination有page_size_query_parammax_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)

pagination django-rest-framework

2
推荐指数
1
解决办法
1969
查看次数