pages indexed by google without content load via ajax

Question

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?

Your web server (IIS?) doesn't handle the OPTIONS method that is the preflight request correctly. This answer might help https://stackoverflow.com/a/21458845/3574481 — peeebeee, Sep 08 '19 at 10:36
@peeebeee Thank you for your comment, I found the solution from this URL although not that one you shared the link, but the confirmed answer — mahdi yousefi, Sep 11 '19 at 07:47

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

pages indexed by google without content load via ajax

1 Answers1