Originally published by me miracool.hashode.dev
You will learn about CORS (Cross Origin Resource Sharing) and how it works in this post. In respect of the Vue JS framework, I strongly recommend that front-end developers use a proxy to send their requests to a server when working locally. This reduces the likelihood of encountering a CORS preflight error. These and more are what I will explain further in this article.
Who should read this article
Readers with a strong interest in front-end and back-end development should continue reading; this article will explain why and how CORS is necessary in modern applications. However, readers interested in learning more about how requests are sent from client to server should continue reading.
Overview
Method of sharing resources between client and server.
Introducing CORS policy.
What is CORS.
How vue js handle CORS policy.
How to proxy request in vue.
conclusion
**Method of sharing resources between client and server : ** Client sends resources through HTTP (Hyper Text Transfer Protocol) header to the server, while the server also returns response. HTTP is a resource-sharing means for both client and server in applications. According to mdn web docs. HTTP headers let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of its case-insensitive name followed by a colon (:), then by its value. Whitespace before the value is ignored.
Introducing CORS policy: Software companies and web applications are constantly on the lookout for ways to restrict access to data stored on their company server. At the very least, to maintain a certain amount of security. Requests coming from the same source will be permitted to share resources. However, requests from different origin will be denied. Consider an API that allows the entire globe to access its data. Hackers posing as legitimate users may steal data. This is the issue that CORS seeks to address.
Access-Control-Allow-Origin: '*'
//your API will be accessible globally
What is CORS: CORS (Cross Origin Resources Sharing) is a header-based approach for protecting server information from malicious data fetching. Clients provide necessary information in a request via the header and anticipate a response from the server. When requests are transmitted between two distinct origins, the client encapsulates all data to be sent using the request method Access-Control-Allow-Methods (GET, POST, OPTIONS). This request should be sent to the server. If the preflight request is successful, the actual request is sent to the server; if the preflight request is unsuccessful, the server returns a preflight error.
How Vue handles CORS policy with preflight errors: To avoid encountering a CORS preflight error, you can proxy your request to the server, but what does it mean to "proxy a request" or to use a proxy server? A proxy server acts as a gateway between you and the internet. When you use a proxy server, all internet traffic is routed through the proxy server on its way to the requested location.
The request is then sent to the same proxy server, which passes the data received from the website to you. Through the use of a proxy server, you can gain access to restricted resources on a server via the internet.
How to proxy request in vue
Create a config file in the root of your application
follow the example below.
note: proxy will only work in development
//vue.config.js file.
module.exports = {
devServer:{
proxy: 'https://yoursite.com/',
}
}
conclusion
Now that you understand how to resolve preflight errors when sending requests to a server, I hope this article has helped you gain a better understanding of CORS policies. We appreciate your time in reading!!!
Top comments (0)