In the vue project, cross-origin processing with axios, vueaxios

Source: Internet
Author: User

In the vue project, cross-origin processing with axios, vueaxios

Cross-origin is a very embarrassing issue. Some people can set request headers in the background, but many front-ends do not have background knowledge and cannot build a server independently, so it becomes an embarrassing thing.

Of course, there are a lot of virtual servers that can solve cross-domain problems. In essence, they all communicate with the backend through background fetch, so as to euphemistically solve cross-domain problems. webpack has this function, therefore, vue-cli is also capable of cross-origin resolution.

Of course, it is impossible for us to directly send ajax, right, we must modify the configuration file

Code:

dev: {env: require('./dev.env'),port: 8080,autoOpenBrowser: false,assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/gp': {target: 'http://we7.qw1000.cn/',changeOrigin: true,pathRewrite: {'^/gp': '/'}}}}

This is a general template and involves several concepts:

Dev, which is actually the meaning of a virtual server,

autoOpenBrowser 

It is not an important attribute, but the key point is whether the configuration can automatically open the browser.

proxyTable: {   '/gp': {   target: 'http://we7.qw1000.cn/',   changeOrigin: true,   pathRewrite: {    '^/gp': '/'   }   } 

We configured our object server to allow our virtual service to access that website. Of course, this is also a webpack function, so it can only be used in the development environment.

The next step is our ajax code. Take post as an example:

Methods: {hello: function (e) {var str;console.log(e.tar get. files [0]); var _ this = this; var that = new FormData (); that. append ("myfile", e.tar get. files [0]); this. $ http. post ('gp/app/index. php? I = 2 & c = entry & do = tool/image & m = qw_deal ', that ). then (function (sures) {console. log (sures); console. log ("production succeeded ")}). catch (function (catchres) {console. log (catchres); console. log ("Upload Failed ")})}},

This. $ what is http ???

This is naturally the result of introducing axios in main. js, but we cannot directly use the use method. Because it is not a vue plug-in, we need to load it into the prototype chain.

import axios from 'axios';Vue.prototype.$http = axios;

In this way, we can use it directly,

This is my friend's link, and I chose a link to the uploaded image file.

Note:

1. The cross-origin solution of webpack is only suitable for use in the development environment,

2. When setting dev in inde. js, please note that the domain name should be set, too many will expire, so it should be www. Baidu. Com

3. Use axios to upload files without using formdata like ajax to upload images

In the above section of the vue project, cross-origin Processing Using axios is all the content that I have shared with you. I hope to give you a reference and support for the customer's house.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.