Home Web Front-end JS Tutorial How to use vue2.0axios cross-domain and rendering

How to use vue2.0axios cross-domain and rendering

Mar 28, 2018 pm 05:34 PM
use rendering

This time I will show you how to use vue2.0axios cross-domain rendering and how to use vue2.0axios cross-domain rendering. What are the precautions? Here are actual cases, let’s take a look.

(Scaffolding vue-cli used)

Step one: Use the following statement in main.js

1

2

3

import axios from

'axios';

Vue.prototype.$axios=axios;

Copy after login

Then in other vue components, you can call this.$axios and use

Step 2: Configure proxyTable in webpack (index.js under config )

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

dev:

 

加入以下

proxyTable:

{

'/api':

{

target:

'http://api.douban.com',//设置你调用的接口域名和端口号

 别忘了加http 

changeOrigin:

true,

pathRewrite:

 

'^/api':

'/'//这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替

  

比如我要调用'http://api.douban.com/v2/movie/top250',直接写‘/api/v2/movie/top250'即可

}

}

},

Copy after login

Step Three:

Try it, the cross-domain is successful, but please note, this is just The cross-domain problem is solved in the development environment (dev). If it is actually deployed on the server in the production environment, there will still be cross-domain problems if it is not from the same origin. For example, the server port we deployed is 3001, which requires joint debugging of the front and back ends. The first step is for the front end. It can be tested separately in production and development environments. In config/dev.env.js and prod.env.js, that is, in the development/production environment, configure the requested address API_HOST respectively. In the development environment, we use the above configuration. The proxy address api, the normal interface address is used in the production environment, so configure it like this

1

2

3

4

module.exports = merge(prodEnv, {

 NODE_ENV: '"development"',//开发环境

 API_HOST:"/api/"

})

Copy after login

1

2

3

4

module.exports = {

 NODE_ENV: '"production"',//生产环境

 API_HOST:'"http://api.douban.com"'

}

Copy after login

Of course, you can directly request http://api.douban.com regardless of the development or production environment. 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

1

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

Copy after login

and then after the second step The end server can configure cros cross-domain, which is access-control-allow-origin: * means allowing all access. 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.

Step 4:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<template>

<p>

  <ul>

    <li v-for="item in movieArr">

      <span>{{item.title}}</span>

    </li>

  </ul>

  <button @click="sayOut">渲染</button>

</p>

</template>

<script>

export default {

 data () {

  return {

    movieArr : []

  }

 },

 methods: {

   sayOut () {

     this.$axios.get('/api/v2/movie/top250')

    .then((response) => {

       console.log(response.data.subjects)

       this.movieArr = response.data.subjects // 这里要强调一下这个this 箭头函数指的是它的父级也就是vue实例 然后不用箭头函数的话 this是一个undefined 无法.movieArr来给他赋值 这里要注意一下 我被坑了半天 希望小伙伴不要被坑

    })

   }

 }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the php Chinese website article!

Recommended reading:

How to use xe-utils in vue

vue-router does not display routes when building How to deal with the page

The above is the detailed content of How to use vue2.0axios cross-domain and rendering. 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 Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use magnet links How to use magnet links Feb 18, 2024 am 10:02 AM

How to use magnet links

How to use mdf and mds files How to use mdf and mds files Feb 19, 2024 pm 05:36 PM

How to use mdf and mds files

What software is crystaldiskmark? -How to use crystaldiskmark? What software is crystaldiskmark? -How to use crystaldiskmark? Mar 18, 2024 pm 02:58 PM

What software is crystaldiskmark? -How to use crystaldiskmark?

How to download foobar2000? -How to use foobar2000 How to download foobar2000? -How to use foobar2000 Mar 18, 2024 am 10:58 AM

How to download foobar2000? -How to use foobar2000

How to use NetEase Mailbox Master How to use NetEase Mailbox Master Mar 27, 2024 pm 05:32 PM

How to use NetEase Mailbox Master

How to use Baidu Netdisk app How to use Baidu Netdisk app Mar 27, 2024 pm 06:46 PM

How to use Baidu Netdisk app

How to use Xiaoai Speaker How to connect Xiaoai Speaker to mobile phone How to use Xiaoai Speaker How to connect Xiaoai Speaker to mobile phone Feb 22, 2024 pm 05:19 PM

How to use Xiaoai Speaker How to connect Xiaoai Speaker to mobile phone

BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange? BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange? Apr 26, 2024 am 09:40 AM

BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange?

See all articles