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

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.