How to use vue2.0axios cross-domain and rendering
Mar 28, 2018 pm 05:34 PMThis 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 |
|
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 |
|
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 |
|
1 2 3 4 |
|
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 |
|
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 |
|
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:
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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

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

What software is crystaldiskmark? -How to use crystaldiskmark?

How to download foobar2000? -How to use foobar2000

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?
