Solve the problem of cross-origin access To icon font fonts by Firefox and ie9

What is cross-origin access and why is there a cross-origin restriction? Everything has to begin with the same-source policy of the browser.

Same-origin policy: Is the core and basic security function of the browser. If the same-origin policy is missing, the normal function of the browser may be affected. It can be said that the Web is built on the same-origin policy, the browser is only an implementation of the same-source policy.

Same-origin policy of the browser: Restrict "document" or scripts from different sources to read or set certain attributes for the current "document. The existence of the same-origin policy limits that the "Source" script from a can only operate the DOM of the "same-origin" page, and the "cross-source" operation will be rejected for the page from B.

What is the same origin? "Img.company.com" and "agent.company.com" are not the same origins? For a long time, I thought these two domains are all subdomains of "company.com", which is the same source. This is actually wrong.

Same Source: Same host (same domain name, subdomain name, or IP address), same port number, and same protocol.

URL	Same source?	Cause
Http://agent.soufun.com/dir1/a.aspx	Yes
Http://agent.soufun.com/dir2/a.aspx	Yes
Https://agent.soufun.com/secure.htm	No	Different protocols
Http://agent.soufun.com: 81/dir2/a. aspx	No	Different ports
Http://img.soufun.com/dir/a.jpg	No	Different subdomains

 

Icon font: Currently, mainstream browsers (including IE6) support CSS 3 custom fonts (@ font-face), so you can try to use font to replace various icons of the Image Display website. This advantage is because it is a vector, the amplification is not distorted, the size is small, the disadvantage is also very obvious, that is, the font at the same time can only be monochrome.

After the function is implemented, the IE is displayed properly (left), but the Firefox Font is not displayed (right ). The following error is reported on the Firefox firebug console:Cross-Source request blocked: Same-source policy does not allow reading http://img.company.com/secondhouse/image/magentnew/styles/fonts20140704/icomoon.woff? Remote resources on ivldoa. You can move resources to the same domain name or enable CORS to solve this problem."

Why is ie different from Firefox? According to the information, "Firefox and ie9 do not support cross-origin access to the icon Font font ", you must configure the header parameter "access-control-allow-origin" on the server where the font file is located to allow the current domain name. In addition, after verification, you must set the parameter "access-control-allow-origin" to "*". the current domain name is not allowed. I do not know why.

How to add the specific configuration? The method is unknown because the O & M personnel helped to configure the configuration. For details, refer to "cross-origin access To icon font fonts in Firefox and ie9". the core is to add the response output of "access-control-allow-origin. To determine the feasibility of the scheme, I used Fiddler to intercept the HTTP Response and add a header. For details, refer to "two methods for setting HTTP Response Headers in Fiddler". again, I felt the powerful functions of Fiddler.