xgqfrms-GitHub/cors-csp.md Secret

## cors-csp.md

      
    Raw
  

              cors-csp.md
            
          
    CORS & CSP

https://gist.github.com/xgqfrms-GitHub/0d36bd446ecb639d5b3b3c7e2e64cf81
https://gist.github.com/xgqfrms-GitHub/a3fcffb6d7923e2a7471041053f00162
https://gist.github.com/xgqfrms-GitHub/b44ba9049575654e36e3032c58576931
CSP


CSP 基于白名单来源，因为此方法可明确指示浏览器将特定的资源集视为可接受的资源，并拒绝其余资源。

https://developers.google.com/web/fundamentals/security/csp/
TL;DR


使用白名单告诉客户端允许加载和不允许加载的内容。
了解可使用哪些指令。
了解这些指令接受哪些关键字。
内联代码和 eval() 被视为是有害的。
向服务器举报政策违规行为，以免执行这些行为。

Fetch API get json data

https://cdn.xgqfrms.xyz/

OK


https://gist.github.com/

Error


ok

fetch('https://cdn.xgqfrms.xyz/json/cats.json', {
    method: 'get'
}).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});
error

fetch('https://cdn.xgqfrms.xyz/json/cats.json', {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        "Access-Control-Allow-Origin": "*",
        'Content-Type': 'application/json'
    }
}).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
VM130:1 OPTIONS https://cdn.xgqfrms.xyz/json/cats.json 405 ()
index.html#/blog?_k=9bbmwk:1 Fetch API cannot load https://cdn.xgqfrms.xyz/json/cats.json.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
The response had HTTP status code 405.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
对预检要求的响应不通过访问控制检查：请求资源上不存在“Access-Control-Allow-Origin”头。
Origin'null'因此不被允许访问。
该响应具有HTTP状态代码405。
如果一个不透明的响应满足您的需要，请将该请求的模式设置为“no-cors”，以禁用CORS来获取资源。

ok

fetch('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=0987b00e542141369049e647701b65d9', {
    method: 'get'
}).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});
error

fetch('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest', {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        "Access-Control-Allow-Origin": "*",
        'Content-Type': 'application/json',
        'X-Api-Key': `0987b00e542141369049e647701b65d9`
    }
}).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});