我想在我的reactjs组件中使用 /data/todo.js文件。我使用axios超文本传输协议请求在我的react组件中获取此数据,即,
import React, { Component } from 'react';
import axios from 'axios';
class TodoList extends Component {
componentWillMount() {
var config = {
headers: {
"Access-Control-Allow-Origin": "http://localhost:8080/",
"Access-Control-Allow-Credentials": true
}
};
axios.get('http://abc.mydomain.org/data/todo.js', config)
.then((response) => {
console.log(response);
}).catch((error) => {
console.log(error)
})
}
render() {
return (
<div className="todo-list"></div>
);
}
}
export default TodoList;
它会给出一个错误XMLHttpRequest无法加载http://abc.mydomain.org/data/todo.js.对预检请求的响应没有通过权限改造检查:请求的资源上没有'Access-Control-Allow-Origin'标头。因此不允许访问Origin'http://localhost:8080。
您正在尝试访问来自应用程序的跨域HTTP请求,默认情况下,该请求被浏览器阻止。
要访问资源,应在您尝试访问的应用程序中启用跨域资源共享(CORS)(在您的情况下http://abc.mydomain.org)
出于安全原因,浏览器限制从脚本中发起的跨域HTTP请求。例如,XMLHttpRequest和FetchAPI遵循主域同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一域请求HTTP资源,除非使用CORS头。
你可以在这里查看更多