In the vue project, use axios for cross-domain processing

Below I will share with you an article about using axios for cross-domain processing in the vue project. It has a good reference value and I hope it will be helpful to everyone.

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

Of course, there are many virtual servers that can solve cross-domain problems. Their essence is to communicate with the backend through the background, so as to solve cross-domain problems euphemistically. Webpack is just right. This kind of function, so vue-cli also has the ability to solve cross-domain issues

Of course, it is impossible for us to successfully send ajax directly, 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, mainly involving several concepts:

dev, naturally means virtual server,

autoOpenBrowser

is not an important attribute, it just configures whether the browser can be opened automatically. The key point is that

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

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

Next is our ajax code. Take this post as an example:

methods: {
			hello: function(e) {
				var str;
				console.log(e.target.files[0]);
				var _this = this;
				var that = new FormData();
				that.append("myfile", e.target.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("上产成功") })
					.catch(function(catchres) { console.log(catchres);
						console.log("上传失败") })
			}
		},

What the hell is this.$http? ? ?

This is naturally the result of us introducing axios in main.js, but we cannot use the use method directly because it is not a vue plug-in, so it needs to be loaded into

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

in the prototype chain so that we can use it directly,

This is the link from my friend, and I chose the uploaded one Link to image file

Notes:

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

2. When setting the dev inside inde.js, please note that the domain name that needs to be set should be the domain name. If it is too much, it will be invalid, so it should be www. baidu. com

3. Use axios to upload files. You don’t need to use formdata like ajax to upload pictures.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Commonly used request method aliases based on Axios (detailed explanation)

How to implement a note-taking application using Vuex

vue2.0 Display method of changing style based on status value

The above is the detailed content of In the vue project, use axios for cross-domain processing. For more information, please follow other related articles on the PHP Chinese website!