angularjsindexingcorsxmlhttprequestgoogle-index

pages indexed by google without content load via ajax


The main problem is my website's pages in google cached are not complete, they have no data, because of XHR errors, here are some details:

I implemented my website using AngularJs, It works correctly on any browsers and locations I've tested. Google says, "Google Search Engine sees exactly what modern browsers display", but my website has not indexed correctly yet, so there is a problem in my codes!

I've been struggling with google to introduce my website's pages completely to Google, but all I've gotten is pages with non-filled controls and without any data that loads via Angular. When I check my website on Google Live Test, I get this kind of errors in Page Resources: "Couldn't be loaded" Some of these errors are related to images that don't matter right now, but the emergency problem is that most of XHRs couldn't be loaded! There is no detail to know what is the exact issue, but when I'd checked my website cached pages on google I saw this error on developer tools:

Access to XMLHttpRequest at '…' from origin 'https://webcache.googleusercontent.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I added these tags to my web.config but there is no change in Live Test and Google Index:

<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value=" content-type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />

could you please tell me what should I do to fix this problem?


Solution

  • I found the solution from these links:

    https://stackoverflow.com/a/19100808/3247491

    https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors

    First I removed these codes from web.config

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="content-type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
      </customHeaders>
    </httpProtocol>
    

    Then I added the CORS NuGet package

    Microsoft.AspNet.WebApi.Cors

    Next add config.EnableCors(); to webApiConfig,

    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();
    }
    

    and finally add this attribute to all apiControllers

    [EnableCors(origins: "*", headers: "*", methods: "*", PreflightMaxAge = TimeSpan.TicksPerDay)]
    

    now google can see pages correctly.