相关疑难解决方法(0)

我使用React和Express遇到了同构JavaScript应用程序的问题.

我正在尝试使用axios.get在我的组件安装时发出HTTP请求

componentDidMount() {
  const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
  axios.get(url).then( res => {
    //use res to update current state
  })
}

我从API获得状态200 res,但我没有得到任何响应数据并在我的控制台中收到错误

XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

但是,如果我在server.js中发出请求

const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
    //console.log(res);
});

它工作正常,我在服务器启动时获得响应数据.这是实际API的问题还是我做错了什么？如果这是一个CORS问题,我猜测server.js中的请求也不起作用？谢谢!

我试图在我的React Application中通过Axios进行API调用.但是,我在浏览器上遇到了这个CORS问题.我想知道我是否可以从客户端解决此问题,因为我内部没有任何API访问权限.附件是我的代码.

const response = axios({
   method: 'post',
   dataType: 'jsonp',
   url: 'https://awww.api.com',
   data: {
    'appToken':'',
    'request':{ 
        'applicationName':'ddfdf', 
        'userName':'jaime@dfd.com', 
        'password':'dfd', 
        'seasonIds':[1521ddfdfd5da02] 
     }
     }
    });
   return{
    type:SHARE_REVIEW,
    payload:'response'
 }
 }

附件是我的WebPack.config.js

module.exports = {

entry: [
'./src/index.js'
 ],
output: {
  path: __dirname,
  publicPath: '/',
  filename: 'bundle.js'
},
module: {
 loaders: [{
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015', 'stage-1']
  }
 },
 { test: /\.json$/, loader: "json-loader"}]
  },
 resolve: {
  extensions: ['', '.js', '.jsx']
 },
devServer: {
historyApiFallback: true,
contentBase: './' …

我需要在使用create-react-app实用程序创建的React中使用'CORS'节点模块.

由于它是一个实用程序,我无法调整内部并将'CORS'注入预先配置的'EXPRESS'模块.

我们怎样才能做到这一点？

我在 chrome 上失败了：

访问 'http://******/places?holiday_type=resort¤cy=EUR&checkin=2019-11-01&checkout=2019-11-10&groups[]=1' 来自 origin ' http://localhost:3000 ' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：预检请求不允许重定向。

我的代码是：

getPlaces = async () => {
try {
  let response = await fetch(`${BASE_URL}/places?holiday_type=resort&currency=EUR&checkin=2019-11-01&checkout=2019-11-10&groups[]=1`,
    {
      method: 'GET',
      headers: new Headers({
        'Accept': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
        'Access-Control-Request-Method': 'GET, POST, DELETE, PUT, OPTIONS',
        'Authorization': 'Basic ' + Base64.encode(apiuser + ':' + apipassword) ,
      }),
    })

    console.log(response)
} catch (error) {
  console.log(error)
}

}