Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to deal with cross-domain problems in vue. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

1.1 what is cross-domain?

The cross-domain problem is due to the same origin policy of the browser, which means that two pages have the same protocol (protocol), host (host) and port number (port), which is the core and basic function of the browser. Without the same origin policy, our browser will be very insecure and may be attacked at any time.

Cross-domain problems will occur when there is a difference among protocol name, domain name and port number.

Here to emphasize one point: cross-domain occurred, it is not that the request was not sent, it is that the request was sent successfully, and the server also returned the data to you, but the browser rejected it for the sake of security.

2.2 how to solve the cross-domain problem? 1. Method one

The backend can communicate with the backend if conditions permit, and the backend adds a response header when it responds, and the front end can handle cross-domain without any action.

two。 Method two

Vue scaffolding provides an easy way to:

If you are using cli3 or above and there is no configuration file in the directory, you need to create a new vue.config.js file in the root directory to add the configuration information you need.

Module.exports= {pages: {index: {/ / entry entry: "src/main.js",},}, devServer: {proxy: {'/ api': {target: 'requested url', pathRewrite: {' ^ / api':''}, ws: true ChangeOrigin: true}

It creates a proxy server to request data from the back end instead of the browser, because there is no cross-domain problem between the server and the server.

The protocol domain name port number of this proxy server is the same as the protocol domain name port number when you run the project, and you can request data.

Using http://localhost:8080/api when you add / api when you request data, you will recognize that you need to deal with cross-domain, not add is to access the corresponding data in the root directory of the project.

3. Method three

Requests that use jsonp but can only handle get, such as post put patch, cannot be processed.

So much for sharing about how vue deals with cross-domain issues. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.