如何调试“在请求的资源上不存在'Access-Control-Allow-Origin'报头"

问题描述

我在浏览器控制台上显示此错误:

I am getting this error shown on browser console:

我正在使用的环境是:

• 后端-Spring Boot
• 前端-Angularjs
• Web服务器-咕

• Backend- Spring Boot
• Front End- Angularjs
• Web Server- Grunt

在服务器上，我已经在请求和响应中将标头定义为:

On server, I am already defining headers in request and response as:

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;

        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT");
        httpResponse.setHeader("Access-Control-Max-Age", "3600");
        httpResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization, Content-Type");

        if (httpRequest.getMethod().equals("OPTIONS")) {
            httpResponse.setStatus(HttpServletResponse.SC_ACCEPTED);
            return;
        }
}

我已经在此链接，但找不到合适的解决方案.

I already found this question on this link No 'Access-Control-Allow-Origin' header is present on the requested resource but couldn't find the appropriate solution.

这是浏览器的网络映像:

Here is the browser network image:

推荐答案

您需要在Web服务器上启用CORS(跨源资源共享).请参阅此资源.

You need to enable CORS(Cross Origin Resource Sharing) on your web server. Please refer to this resource.

您需要将响应标头设置为:

You need to set your response header to:

Access-Control-Allow-Origin: *

此链接包含设置CORS所需的所有信息

This link has all the info needed to set CORS

为所有域启用CORS并不是一个好习惯，因此，在一切正常运行后，您应该对其进行限制.

Enabling CORS for all domain is not a good practice, so you should restrict it when everything is up and running.

在您自己的API中调用一个URL，并使用cURL之类的东西在服务器端访问数据.我有一个当前工作项目，情况也与此相同(Laravel + AngularJs).

Call a URL in your own API and access the data using your server side with cURL or something. I have a current working project with same situation (Laravel + AngularJs).

我的带有cURL请求的远程身份验证检查的示例代码.

My sample code for the remote auth check with cURL request.

代码采用Laravel-PHP格式，希望您可以转换为正在使用的语言.

Code is in Laravel-PHP format, I hope you can convert to the language you are working on.

public function curlRequester($url,$fields)
    {
        // Open connection
        $ch = curl_init();

        // Set the url, number of POST vars, POST data
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true );

        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);

        // Execute post
        $result = curl_exec($ch);

        // Close connection
        curl_close($ch);

        $result_json_decoded = json_decode($result, true);


        return $result_json_decoded;
    }

控制器功能

public function login()
{

    // set POST params
    $fields = array(
        'username' => Input::get('username'),
        'password' => Input::get('password')
    );
    $url = 'http://www.this-is-api-url.com/login';

    $result = $this->curl->curlRequester($url,$fields);

    return response()->json($result);

}

角度请求功能

$scope.authCheck = function(){

        $http({
            url:'http://www.our-project-url/login',
            method:"post",
            data:{"username": "rameez", "password":"rameezrami"}
        })
        .success(function(response) {
            if(response.status==1){
                $location.path("/homepage");
            }else if(response.status==0){
                $scope.login_error_message_box = true;
                $scope.login_error_message_text =response.message;
            }

        });

    }

这篇关于如何调试“在请求的资源上不存在'Access-Control-Allow-Origin'报头"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！