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

This article mainly shows you "how to solve the cross-domain problem of ajax request front-end". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to solve the cross-domain problem of ajax request front-end".

First, how the cross-domain is formed

When we request any one of the protocols, domain names and ports of a url to be different from the protocol, domain name and port of the current page url, we call it cross-domain.

Cross-domain results in:

1. Unable to read Cookie, LocalStorage and IndexedDB of non-homologous web pages

2. Unable to contact DOM of non-homologous web pages

3. Unable to send AJAX request to non-homologous address (can be sent, but the browser will refuse to accept the response)

Second, the root causes of cross-domain

The root cause of cross-domain is the same origin policy of requesting browser, and the reason of cross-domain request reporting error is: browser same origin policy & & request is ajax type & & request is indeed cross-domain.

III. Solutions

To introduce you to three methods of jsonp,cors, proxy forwarding

1 、 JSONP

JSONP is a common method of cross-source communication between server and client. The biggest feature is simple application and good compatibility (compatible with low-version IE). The disadvantage is that only get requests are supported, but post requests are not supported.

Principle: the src or href attributes of img and srcipt,link tags are not restricted by the same origin policy and can be used as requests. After accepting the request, the backend returns a callback function callback, which calls the function already defined by the frontend to realize the cross-domain request.

To take a very simple example: we request an image of a network address through the src attribute of the img tag, which is a non-homologous request, but our request will not be affected because the browser's same origin policy is only valid for ajax requests. In other words, only ajax requests cause cross-domain problems.

2 、 CORS

CORS is the abbreviation of Cross-domain Resource sharing (Cross-Origin Resource Sharing). It is a W3C standard and is a fundamental solution to cross-source AJAX requests.

CORS allows any type of request. When using CORS to access data, the client does not need to change any data access logic. All the work is done automatically between the server and the browser. The front-end code is no different from sending a normal Ajax request, we just need to set it on the server side (back-end work)

3. Proxy forwarding

Set up an intermediate proxy service between the front-end service and the back-end interface service, and its address is the same as that of the front-end server, so:

In this way, we can do interface forwarding through the middle server to solve cross-domain problems in the development environment, which seems complicated. In fact, vue-cli has already built this technology for us, and we just need to configure it according to the requirements.

Vue.config.js 's devServer (development environment) configures the proxy server to send requests through this proxy server so that it is not purely a cross-domain problem. The code is as follows:

Module.exports = {devServer: {/ /... Omit / / Agent configuration proxy: {/ / if the request address starts with / api Trigger the agent mechanism / / http://localhost:9588/api/login-> http://localhost:3000/api/login'/ api': {target: 'http://localhost:3000' / / the real interface address we want to proxy}

Remember that the root path in baseURL is a relative address, not an absolute address.

The above is all the content of the article "how to solve the cross-domain problem of ajax request front end". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.