提问者:小点点

XMLHttpRequest无法加载http://abc.mydomain.org/data/todo.js


我想在我的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。


共1个答案

匿名用户

您正在尝试访问来自应用程序的跨域HTTP请求,默认情况下,该请求被浏览器阻止。

要访问资源,应在您尝试访问的应用程序中启用跨域资源共享(CORS)(在您的情况下http://abc.mydomain.org)

出于安全原因,浏览器限制从脚本中发起的跨域HTTP请求。例如,XMLHttpRequest和FetchAPI遵循主域同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一域请求HTTP资源,除非使用CORS头。

你可以在这里查看更多