CORS errors happen when your browser stops your app from talking to another website or API because it doesn\u2019t trust it yet. <\/p>\n\n\n\n
Don\u2019t worry\u2014it\u2019s a common issue, and there are easy ways to fix it. Let\u2019s break it down.<\/p>\n\n\n\n
CORS is a security rule that browsers follow. It checks if your app has permission to ask another website (or API) for data.<\/p>\n\n\n\n
If the permission isn\u2019t set up correctly, the browser blocks the request and shows an error like:<\/p>\n\n\n\n
\u201cBlocked by CORS policy: No \u2018Access-Control-Allow-Origin\u2019 header is present on the requested resource.\u201d<\/p>\n\n\n\n
Let\u2019s fix each case step by step.<\/p>\n\n\n\n
If your app makes requests from the backend (like Node.js or another server), you need to adjust the server\u2019s settings.<\/p>\n\n\n\n
How to Fix:<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
Imagine your server is a security guard. You give it a list of people (domains or IPs) who are allowed to enter. Once your app is on the list, the guard (server) lets it in!<\/p>\n\n\n\n
When you call an API directly from the browser using JavaScript, the browser might block it because the server didn\u2019t say, \u201cIt\u2019s okay to share data with your app.\u201d<\/p>\n\n\n\n
What You\u2019ll See: Access to XMLHttpRequest at ‘http:\/\/yourdomain.com\/rest\/services\/sendSMS\/sendGroupSms?AUTH_KEY=tgdfsrgdfghdf&message=dthisistestsms&senderId=SGRHSP&routeId=11&mobileNos=999999999&smsContentType=English<\/a>‘<\/p>\n\n\n\n From origin’http:\/\/localhost:5173<\/a>‘ has been blocked by CORS policy: <\/p>\n\n\n\n No ‘Access-Control-Allow-Origin’ header is present on the requested resource. <\/p>\n\n\n\n How to Fix:<\/p>\n\n\n\n Add an option called mode: ‘no-cors’ to your API call. This tells the browser to stop checking the CORS rules.<\/p>\n\n\n\n Here\u2019s a simple example to show how you can fix this issue in your code:<\/p>\n\n\n\n Example of a Client-Side Fix<\/strong><\/p>\n\n\n\n Here\u2019s how you can modify your JavaScript code:<\/p>\n\n\n\n document.getElementById(‘sendSmsButton’).addEventListener(‘click’, () => { <\/p>\n\n\n\n const apiUrl = ‘https:\/\/yourdomain.net\/rest\/services\/sendSMS\/sendGroupSms?AUTH_KEY=dfgdfg&message=Hello&senderId=TBTSIG&routeId=1&mobileNos=9999999999&smsContentType=English<\/a>‘;<\/p>\n\n\n\n fetch(apiUrl, { <\/p>\n\n\n\n method: ‘GET’, <\/p>\n\n\n\n mode: ‘no-cors’, <\/p>\n\n\n\n }) <\/p>\n\n\n\n .then(response => { <\/p>\n\n\n\n if (!response.ok) { <\/p>\n\n\n\n throw new Error(`HTTP error! Status: ${response.status}`); <\/p>\n\n\n\n } <\/p>\n\n\n\n return response.json(); <\/p>\n\n\n\n }) <\/p>\n\n\n\n .then(data => { <\/p>\n\n\n\n console.log(‘Response:’, data); <\/p>\n\n\n\n alert(‘SMS Sent Successfully!’); <\/p>\n\n\n\n }) <\/p>\n\n\n\n .catch(error => { <\/p>\n\n\n\n console.error(‘Error:’, error); <\/p>\n\n\n\n alert(‘Failed to send SMS!’); <\/p>\n\n\n\n }); <\/p>\n\n\n\n }); <\/p>\n\n\n\n By following these simple steps, you can resolve CORS issues and make your API calls work smoothly.<\/p>\n","protected":false},"excerpt":{"rendered":" CORS errors happen when your browser stops your app from talking to another website or API because it doesn\u2019t trust it yet. Don\u2019t worry\u2014it\u2019s a common issue, and there are easy ways to fix it. Let\u2019s break it down. What is CORS? CORS is a security rule that browsers follow. It checks if your app… Continue reading Fixing CORS Policy Issues: Step-by-Step<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[187],"tags":[205,196,204,193,191,194,192,198,188,197,190,206,200,199,202,203,195,201,189],"class_list":["post-1376","post","type-post","status-publish","format-standard","hentry","category-cors-policy","tag-api-security","tag-backend-development","tag-browser-security","tag-cors-configuration","tag-cors-error-fix","tag-cors-headers","tag-cors-in-javascript","tag-cors-middleware","tag-cors-policy","tag-cross-origin-requests","tag-cross-origin-resource-sharing","tag-enable-cors","tag-how-cors-works","tag-http-headers","tag-origin-and-headers","tag-rest-api-security","tag-same-origin-policy","tag-web-api-development","tag-web-development","entry"],"_links":{"self":[{"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/posts\/1376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/comments?post=1376"}],"version-history":[{"count":2,"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/posts\/1376\/revisions"}],"predecessor-version":[{"id":1378,"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/posts\/1376\/revisions\/1378"}],"wp:attachment":[{"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/media?parent=1376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/categories?post=1376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.msgclub.net\/learn\/wp-json\/wp\/v2\/tags?post=1376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/strong>An error message like this:<\/p>\n\n\n\nError:<\/h4>\n\n\n\n
Example Code<\/h3>\n\n\n\n
Sample Code:<\/h4>\n\n\n\n
Key Points to Remember<\/h3>\n\n\n\n
\n