undefinedfix
Sign in

Can Axios solve the problem of cross domain access?

188betasiaa edited in Fri, 13 Nov 2020

Vue, which is used in vue2, has encountered cross domain problems and cannot be accessed across domains. Is there a solution? The premise is that Axios must be used. Also, which is better, Axios or Vue resource?

9 Replies
soomrolahore
commented on Fri, 13 Nov 2020

First of all, Axios is better. Now vue2 is officially recommended. Vue resource is no longer maintained.

Jianzhihu answer: which address is the official Ajax plug-in Axios recommended by vue2?

Then, the cross domain problem of Axios is divided into the following situations:

1. The server does not support cross domain, such as the following error

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://xxx.com ' is therefore not allowed access.

Solution: if the server side is self-developed, then modify the relevant code to support cross domain. If it is not self-developed, you can write a back-end to forward the request and implement it in the way of proxy.

2. The server supports cross domain, but it can't respond to options requests. For example, we can see the situation in the following figure in the developer tool, which shows that nginx can't respond to options requests.

图片描述

Reasons for options request:

The cross source resource sharing standard adds a series of HTTP headers to enable the server to declare which sources can access the resources on the server through the browser. In addition, for those HTTP request methods (especially HTTP methods other than get, or post requests with some MIME types), the standard strongly requires the browser to send a preflight request in the options request mode, so as to know the HTTP method supported by the server for cross source requests. After confirming that the server allows the cross source request, send the real request in the actual HTTP request method. The server can also inform the client whether it needs to send credit information (including cookies and HTTP authentication related data) with the request.

From HTTP access control (CORS)

Solution: if the server side also supports simple requests (see the definition below), especially when Axios post requests, the default format is JSON, and the problem is solved by changing it to string! The modification method recommended by the government; if the server only supports post requests in JSON format, see if you can modify the configuration of the server to support options; if the server can't be modified, you can only write the proxy yourself.

Simple request: 1. Only use get, head or post request methods. If post is used to transfer data to the server, the content type can only be one of application / x-www-form-encoded, multipart / form data or text / plain. 2. Do not use custom request headers (similar to x-modified).
user1108069
commented on Fri, 13 Nov 2020
The cross domain post instance uses the QS component to avoid Ajax messenger requests and is compatible with Android.
import axios from 'axios';
import qs from 'qs';

axios.post('http://www.xyz.com/request', qs.stringify(params))
.then(response => {
  console.log(response);
})
.catch(err => {
  console.log(err);
});

==================This one works

Amitlal
commented on Fri, 13 Nov 2020
You need this: https://bird.ioliu.cn
suxbr
commented on Sat, 14 Nov 2020

I have this problem. The front desk doesn't know how they set it up. List < pubxtzdbo > pubxtzdbos= pubXtzdService.getPubXtzdNodesById (481L, null, 1);

    
    String data = JsonUtil.toJsonNonNull(pubXtzdBos);
    
    OutputStream out = response.getOutputStream(); 
    
    out.write(data.getBytes("UTF-8"));//以UTF-8进行编码  
    
    response.setHeader("Access-Control-Allow-Origin", "*");
    //告诉浏览器编码方式  
    response.setHeader("Content-Type","text/html;charset=UTF-8" ); 
z0d1ac
commented on Sat, 14 Nov 2020

In general, Axios doesn't support jsonp, so it can't solve cross domain problems. For example, CORS (cross domain resource sharing) solution is used to solve cross domain problems.

dharmik
commented on Sat, 14 Nov 2020

Fetch, built-in method window.fetch It's OK to find out

tuckerwired
commented on Sat, 14 Nov 2020

Cross domain has nothing to do with Axios. Just configure the server's cros, or JSON, as a common cross domain solution

Refer to this question

https://segmentfault.com/q/10...

cnd
commented on Sat, 14 Nov 2020

What I said upstairs is very reasonable, but I'm afraid it's too long

In short, cross domain is a security restriction made by browsers

There is no relationship between the implementation of cross domain and the specific use of an Ajax library. There are about four main ways to search the keyword "front end implementation of cross domain method"

I believe the landlord will find the answer

entranceefun88
commented on Sat, 14 Nov 2020

I also have this problem, but using JQ post can actually... And Axios reports an error... I don't know what the back-end configuration is doing... I'm depressed

lock This question has been locked and the reply function has been disabled.