1

I implemented my website using AngularJs, It works correctly on any browsers and locations I've tested. Although they claimed that Google Search Engine sees exactly what modern browsers display, my website not indexed correctly.

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?

  • What are these resources? Could they be hosted on your own server rather than on a third party server? – Stephen Ostermiller Nov 13 at 16:37
  • @StephenOstermiller thanks for comment, I found the answer, but I forgot to publish it here, so I just published what solve my problem – mahdi yousefi Nov 14 at 7:44
2

I found the solution from these links:

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

https://docs.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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.