Question

我一直遇到错误No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我知道这是网上经常被问到的问题，但除了使用JSONP的解决方法之外，我在stackoverflow上看不到任何有用的答案。

我的代码是

  componentDidMount() {
    if (navigator.geolocation){
      function success(position) {
        var latitude  = position.coords.latitude;
        var longitude = position.coords.longitude;
        axios.get(`https://api.darksky.net/forecast/apikey/`+latitude+`,`+longitude+`?units=auto`)
        .then(result => {
          this.setState({
            daily: result.data.daily.data,
            loading: false,
            error: null
          });
        })
          .catch(err => {
            // Something went wrong. Save the error in state and re-render.
            this.setState({
              loading: false,
              error: err
            });
          });
      };
      function error() {
        console.log( 'geolocation error' )
      };
      navigator.geolocation.getCurrentPosition(success.bind(this), error);
    }
  }

Answer 1

如果您有权访问服务器端应用程序，请按照Mohamed Jahaber Sadiq提供的第一个答案

如果目的只是查看结果，您可以使用“Allow-Control-Allow-Origin：*”chrome插件，默认情况下会在通过chrome处理的所有响应中添加标头。

Answer 2

这是ajax调用的浏览器限制，此处只有三个可用选项。

如果您拥有所请求的服务器，则可以将Access-Control-Allow-Origin添加为您的应用程序域。

这两个是唯一的选择。

使用JSONP作为使用回调的响应格式n进程。
您可以使用服务器端代理，例如。你可以在你想要使用的外部域的nginx或apache配置映射'somerequest'路径中调用yourapplication.com/somerequest，即api.darksky.net

Axios没有access-control-allow-origin

2 个答案: