javascript 将代码上载到我的网站后，CORS策略阻止了该问题

7gcisfzg 于 2022-12-28 发布在 Java

关注(0)|答案(1)|浏览(133)

我有完整的HTML代码与以下JS脚本，当我打开它通过我的域，我得到这个消息：

已被CORS策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

我希望它的工作，为其他用户不仅为我，为任何人都有链接。

const baseUrl = "my api url"
    

    function getMatches()
    {
        const url = `${baseUrl}`

        axios.get(url)
               .then((data) => {
            console.log(data)

            const matches = data.data.data.match
            console.log(matches)
            
           
            document.getElementById("matches").innerHTML = ""

            for(match of matches)
            {
                
              
                if(match.home_name == null)
                {
                    
                    continue
                }
                console.log(match.home_name)
                const content = `
                <div class="col-sm-12">

                    <div class="card shadow rounded-pill mt-5" style="overflow: hidden;">
                        <div class="card-body p-0">
                            <div class="row" style="height: 120px;">

                                <!-- FIRST TEAM COL -->
                                <div 
                                    class="col-sm-3 bg-primary d-flex flex-direction-column justify-content-center align-itmes-center"
                                    style="border-right: solid 5px #5b0d25; "
                                >

                                    <div class="d-flex align-items-center justify-content-center" >
                                        <!-- IMAGE AND TEAM NAME DIV -->
                                        <div>
                                            
                                            
                                            <h5 style="margin: auto 4px">
                                                <b>${match.home_name}</b>
                                            </h5>
                                        </div>
                                        <!--// IMAGE AND TEAM NAME DIV// -->
                                    </div>
                                </div>
                                <!--// FIRST TEAM COL //-->

                                <!-- MATCH INFO COL -->
                               
                                        <div class="col-sm-6" style="text-align: center;">
                                        <h6>${match.country.name}</h6>
                                        <h1>${match.score}</h1>
                                        <h6>${match.time}</h6>
                                    </div>
                                       
                                <!--// MATCH INFO COL //-->

                                <!-- SECOND TEAM COL -->
                                <div 
                                    class="col-sm-3 bg-primary d-flex flex-direction-column justify-content-center align-itmes-center"
                                    style="border-left: solid 5px #5b0d25; "
                                >

                                    <div class="d-flex align-items-center justify-content-center" >
                                        <!-- IMAGE AND TEAM NAME DIV -->
                                        <div>
                                            

                                            <h5 style="margin: auto 4px">
                                                <b>${match.away_name}</b>
                                            </h5>
                                        </div>
                                        <!--// IMAGE AND TEAM NAME DIV// -->
                                    </div>
                                </div>
                                <!--// SECOND TEAM COL //-->
                            </div>
                        </div>
                    </div>
                </div>
                `
                
                document.getElementById("matches").innerHTML += content
            }
        
        })
    }
    getMatches()

我在本地服务器上面对它，但我跳过了使用没有CORS的谷歌Chrome。

JavaScript

来源：https://stackoverflow.com/questions/74932632/problem-being-blocked-by-cors-policy-after-uploading-the-code-on-my-website

1条答案

按热度按时间

mrwjdhj31#

async function postData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST',
    mode: 'no-cors', //cors, same-origin
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: JSON.stringify(data)
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData('URL', { answer: 42 })
  .then((data) => {
    console.log(data); // JSON data parsed by `data.json()` call
  });

CORS是安全性的重要组成部分，由服务器（后端）处理。如果设置了此选项，则允许配置的IP地址访问该Web应用程序。

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 将代码上载到我的网站后，CORS策略阻止了该问题

1条答案

相关问题

热门标签

最新问答