vue-cli axios request method and cross-domain processing issues-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

vue-cli axios request method and cross-domain processing issues

亚连

May 28, 2018 pm 04:16 PM

axios vue-cli solving issues

This article mainly introduces the vue-cli axios request method and cross-domain processing issues. The article also mentions axios in vue to solve cross-domain issues and the use of interceptors. It is very good and has reference value. Friends who need it Please refer to it

vue-cli axios request method and cross-domain processing

Install axios

cnpm install axios --save

Copy after login

Introduce axios into the file where axios is to be used

main.js文件 :import axios from &#39;axois&#39;
要发送请求的文件:import axios from &#39;axois&#39;

Copy after login

Set the proxy in the config/index.js file

 dev: {   
  proxyTable: {// 输入/api 让其去访问http://localhost:3000/api
   &#39;/api&#39;:{  
     target:&#39;http://localhost:3000&#39;//设置调用的接口域名和端口号 ( 设置代理目标)
   },
   &#39;/api/*&#39;:{
    target:&#39;http://localhost:3000&#39;
   }，
  changeOrigin: true,
   pathRewrite: { //路径重写 
      &#39;^/api&#39;: &#39;/&#39; //这里理解成用‘/api&#39;代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用&#39;http://localhost:3002/user/add&#39;，直接写‘/api/goods/add&#39;即可
    } 
  }

Copy after login

Try it, the cross-domain is successful, but this knowledge of the development environment (dev) solves the cross-domain problem. In the production environment, if it is actually deployed on the server, there will still be cross-domain problems if it is not from the same origin.

axios request method

Get request

 // 向具有指定id的用户发出请求
  axios.get(&#39;/user?id=1001&#39;)
   .then(function (response) {
    console.log(response.data);
   }).catch(function (error) {
    console.log(error);
   });
  // 也可以通过 params 对象传递参数
  axios.get(&#39;/user&#39;, {
    params: {
     id: 1001
    }
   }).then(function (response) {//请求成功回调函数
    console.log(response);
   }).catch(function (error) {//请求失败时的回调函数
    console.log(error);
   });

Copy after login

post request

  axios.post(&#39;/user&#39;, {
    userId: &#39;10001&#39; //注意post请求发送参数的方式和get请求方式是有区别的
   }).then(function (response) {
    console.log(response);
   }).catch(function (error) {
    console.log(error);
   });

Copy after login

##Added:

Axios in vue solves cross-domain issues and the use of interceptors

1. Axios in vue does not support the vue.use() method of declaration. So there are two ways to solve this:

The first one: introduce axios in main.js, and then set it as a property on the vue prototype chain, so that this.axios can be directly accessed in the component Using

import axios from &#39;axios&#39;;
Vue.prototype.axios=axios;
components：
this.axios({
    url:"a.xxx",
    method:&#39;post&#39;,
    data:{
      id:3,
      name:&#39;jack&#39;
    }
  })
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
 }

Copy after login

One thing to note here is that it is invalid to use this to copy the requested data to data in axios, which can be solved by using arrow functions.

1. The local proxy cross-domain problem when the vue cli scaffolding front-end adjusts the back-end data interface, for example, I access the interface on localhost http://10.1.5.11:8080/xxx/duty?time=2017- 07-07 14:57:22', it must be accessed across domains. If accessed directly, XMLHTTPRequest can not load will be reported http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'. Response to preflight request doesn't pass access control….

Why is there a cross-domain problem? Because this is non-original communication, you can go to Google to learn more. Here you only need to configure the proxyTable in webpack. Find index.js in the config as follows:

config/index.js
dev: {
  proxyTable: {
   &#39;/api&#39;: {
    target: &#39;http://10.1.5.11:8080/&#39;,//设置你调用的接口域名和端口号 
    changeOrigin: true,   //跨域
    pathRewrite: {
     &#39;^/api&#39;: &#39;/&#39;     //这里理解成用‘/api&#39;代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用&#39;http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22&#39;，直接写‘/api/xxx/duty?time=2017-07-07 14:57:22&#39;即可
    }
   }

Copy after login

Cross-domain success, but this is only a cross-domain problem solved in the development environment (dev). In the production environment, if it is actually deployed on the server, there will still be cross-domain problems if it is not from the same origin. For example, the server port we deployed is 3001 , requires front-end and back-end joint debugging. In the first step, we can test the front-end in two environments: production and development. Configure them in config/dev.env.js and prod.env.js, that is, in the development/production environment. The requested address API_HOST, in the development environment we use the proxy address api configured above, and in the production environment we use the normal interface address, so configure it like this, respectively in

config/dev.env.js and prod .env.jsConfigure the following in the two files.

config/dev.env.js：
module.exports = merge(prodEnv, {
 NODE_ENV: &#39;"development"&#39;,//开发环境
 API_HOST:"/api/"
})
prod.env.js
module.exports = {
 NODE_ENV: &#39;"production"&#39;,//生产环境
 API_HOST:&#39;"http://10.1.5.11:8080/"&#39;
}

Copy after login

Of course, you can directly request http://10.1.5.11:8080// in both development and production environments. After configuration, the program will automatically determine whether it is a development or production environment during testing, and then automatically match API_HOST. We can use process.env.API_HOST in any component to use the address, such as:

instance.post(process .env.API_HOST 'user/login', this.form)

Then in the second step, the back-end server configures cros cross-domain, which is access-control-allow-origin: *All access means . To sum up: In the development environment, our front-end can configure a proxy to cross-domain. In a real production environment, we need the cooperation of the back-end. A certain expert said: This method is not easy to use in IE9 and below. If compatibility is required, the best way is to add a proxy to the server port on the backend. The effect is similar to the webpack proxy during development.

1. Axios sends get post request problem

When sending a post request, you generally need to set Content-Type, the type of content to be sent, application/json refers to sending a json object But you need to stringify it in advance. application/xxxx-form refers to sending? In the format of a=b&c=d, you can use the qs method to format it. qs will be installed automatically after installing axios. You only need to import it in the component.

const postData=JSON.stringify(this.formCustomer);
&#39;Content-Type&#39;:&#39;application/json&#39;}
const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
&#39;Content-Type&#39;:&#39;application/xxxx-form&#39;}

Copy after login

1. Use of interceptors

When we visit an address page, we are sometimes asked to If you log in again and then visit this page, it means that the identity authentication has failed, such as the token is lost, or the token still exists locally, but it has become invalid, so simply judging whether there is a local token value cannot solve the problem. At this time, the server returns a 401 error when requesting, indicating an authorization error, that is, there is no right to access the page.

We can filter this situation before sending all requests and before operating the server response data.

// http request 请求拦截器，有token值则配置上token值
axios.interceptors.request.use(
  config => {
    if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
      config.headers.Authorization = token;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });
// http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 这里写清除token的代码
          router.replace({
            path: &#39;login&#39;,
            query: {redirect: router.currentRoute.fullPath}  //登录成功后跳入浏览的当前页面
          })
      }
    }
    return Promise.reject(error.response.data) 
  });

Copy after login

Look below

vue cli脚手架前端调后端数据接口时候的本地代理跨域问题，如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的，相当于浏览器设置了一到门槛，会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn't

pass access control…. 为什么跨域同源非同源自己去查吧，在webpack配置一下proxyTable就OK了，如下 config/index.js

dev: {
  加入以下
  proxyTable: {
   &#39;/api&#39;: {
    target: &#39;http://40.00.100.100:3002/&#39;,//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
     &#39;^/api&#39;: &#39;/&#39;
        //这里理解成用‘/api&#39;代替target里面的地址，
        后面组件中我们掉接口时直接用api代替 比如我要调
        用&#39;http://40.00.100.100:3002/user/add&#39;，直接写‘/api/user/add&#39;即可
    }
   }
  }

Copy after login

上面是我整理给大家的，希望今后会对大家有帮助。

Ajax获取响应内容长度的方法

Ajax方式实现定期更新页面某块内容的方法

ajax读取properties资源文件数据的方法

The above is the detailed content of vue-cli axios request method and cross-domain processing issues. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7715

Java Tutorial

1641

CakePHP Tutorial

1395

Laravel Tutorial

1289

PHP Tutorial

1232

Related knowledge

What should I do if 'Uncaught (in promise) Error: Request failed with status code 500' occurs when using axios in a Vue application? Jun 24, 2023 pm 05:33 PM

It is very common to use axios in Vue applications. axios is a Promise-based HTTP client that can be used in browsers and Node.js. During the development process, the error message "Uncaught(inpromise)Error: Requestfailedwithstatuscode500" sometimes appears. For developers, this error message may be difficult to understand and solve. This article will explore this

Choice of data request in Vue: Axios or Fetch? Jul 17, 2023 pm 06:30 PM

Choice of data request in Vue: AxiosorFetch? In Vue development, handling data requests is a very common task. Choosing which tool to use for data requests is a question that needs to be considered. In Vue, the two most common tools are Axios and Fetch. This article will compare the pros and cons of both tools and give some sample code to help you make your choice. Axios is a Promise-based HTTP client that works in browsers and Node.

What should I do if 'TypeError: Failed to fetch' occurs when using axios in a Vue application? Jun 24, 2023 pm 11:03 PM

Recently, during the development of Vue applications, I encountered a common problem: "TypeError: Failedtofetch" error message. This problem occurs when using axios to make HTTP requests and the backend server does not respond to the request correctly. This error message usually indicates that the request cannot reach the server, possibly due to network reasons or the server not responding. What should we do after this error message appears? Here are some workarounds: Check your network connection due to

How to solve the problem of 'Error: Network Error' when using axios in Vue application? Jun 25, 2023 am 08:27 AM

How to solve the problem of "Error: NetworkError" when using axios in Vue application? In the development of Vue applications, we often use axios to make API requests or obtain data, but sometimes we encounter "Error: NetworkError" in axios requests. What should we do in this case? First of all, you need to understand what "Error:NetworkError" means. It usually means that the network connection

Efficiently utilize Vue and Axios to implement batch processing of front-end data Jul 17, 2023 pm 10:43 PM

Efficiently utilize Vue and Axios to implement batch processing of front-end data. In front-end development, data processing is a common task. When we need to process a large amount of data, processing the data will become very cumbersome and inefficient if there is no effective method. Vue is an excellent front-end framework, and Axios is a popular network request library. They can work together to implement batch processing of front-end data. This article will introduce in detail how to efficiently use Vue and Axios for batch processing of data, and provide relevant code examples.

What should I do if 'Error: timeout of xxxms exceeded' occurs when using axios in a Vue application? Jun 24, 2023 pm 03:27 PM

What should I do if "Error: timeoutofxxxmsexceeded" occurs when using axios in a Vue application? With the rapid development of the Internet, front-end technology is constantly updated and iterated. As an excellent front-end framework, Vue has been welcomed by everyone in recent years. In Vue applications, we often need to use axios to make network requests, but sometimes the error "Error: timeoutofxxxmsexceeded" occurs.

A complete guide to implementing file upload in Vue (axios, element-ui) Jun 09, 2023 pm 04:12 PM

A complete guide to implementing file upload in Vue (axios, element-ui) In modern web applications, file upload has become a basic function. Whether uploading avatars, pictures, documents or videos, we need a reliable way to upload files from the user's computer to the server. This article will provide you with a detailed guide on how to use Vue, axios and element-ui to implement file upload. What is axiosaxios is a prom based

What should I do if 'TypeError: bind is not a function' occurs when using axios in a Vue application? Jun 25, 2023 am 08:31 AM

In Vue.js applications, it is very common to use axios. Axios is a powerful HTTP request library that allows you to easily send asynchronous HTTP requests. However, when using axios, you will encounter some errors, one of which is "TypeError: bindisnotafunction". This error is usually caused by the axios version being incompatible with Vue.js. Let’s take a look at the solutions to this error. First, we need

See all articles