Imgur API请求被CORS政策阻止

时间:2019-04-17 20:51:54

标签: javascript reactjs axios antd imgur

我想在ReactJS中创建一个组件,以便能够使用其api将图像上传到imgur。

为了达到这个目标,我使用了AntDesign的Upload组件,将axios向imgur的api请求的功能设置为动作:

<Upload
  action={file => {
    const data = new FormData();
    data.append('image', file);
    const config = {
      headers: {
        'Content-type': 'application/x-www-form-urlencoded',
        'Authorization': 'Client-ID xxxxxxxx'
      }
    }

    return axios.post('https://api.imgur.com/3/upload', config, data)
  }}
  listType="picture-card"
  fileList={fileList}
  onPreview={this.handlePreview}
  onChange={this.handleChange}
>
  {fileList.length >= 1 ? null : uploadButton}
</Upload>

但是当尝试上传任何文件时,这是我唯一得到的东西:

Access to XMLHttpRequest at 'https://api.imgur.com/3/upload' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

由于请求块,明显的未捕获的诺言:

Uncaught (in promise) Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:87)

我的代码可能有问题,因为对邮递员执行相同的请求会获得成功的结果,但是我找不到问题。

编辑:是的,邮递员不受CORS的限制。

1 个答案:

答案 0 :(得分:0)

将此添加到标题-

import matplotlib.pyplot as plt
import cartopy
import cartopy.io.shapereader as shpreader

plt.figure(figsize=(4, 4))

central_lon, central_lat = 0, 45
extent = [-10, 45, 35, 70]

ax = plt.axes(projection=cartopy.crs.Orthographic(central_lon, central_lat))
ax.set_extent(extent)
ax.gridlines()
ax.add_feature(cartopy.feature.BORDERS, linestyle=':', alpha=1)
ax.add_feature(cartopy.feature.OCEAN,facecolor=("lightblue"))
ax.add_feature(cartopy.feature.LAND)
ax.coastlines(resolution='10m')

plt.show()