配置代理服务器解决跨域问题

首先我们确定一下跨域的概念

什么是跨域？跨域的解决方法。 - 胡漂亮的文章 - 知乎 什么是跨域？跨域的解决方法。 - 知乎

这里的解释非常明确，当即我就确定了原来是我的页面和后端接口域名和端口不同

例如前端页面域名和端口号为：http://localhost:8080

        后端为 ：http://xsss:9000

我觉得这种方法比较简单也比较适合我：配置代理服务器

代理服务器配置在前端中，让页面把请求发送给代理服务器，代理服务器再转发给后端（服务器之间的通讯不需要用ajax）

接下来是配置

找到vue.config.js，添加

//开启代理服务器
devServer: {
	  proxy:'http://xsss:9000'
  }

proxy中放入根路径

没有这个文件夹创建一个新的vue.config.js，配置

module.exports = {
  pages: {
	  index:{
		  entry:'./src/main.js'
	  },
  },
  devServer: {
	  proxy:'http://xssq:9000'
  }
  //开启服务代理器（方式二）可以实现多个代理
  //  devServer: {
  //     proxy: {
  //       '/api': {//请求前缀
  //         target: 'http://127.0.0.1:8888',
		//   pathRewrite:{'^/api':''},//匹配所有/api换位空字符
  //         ws: true,//用于支持websocket
  //         changeOrigin: true//用于控制请求头中的host值
  //       },
		// //配置多个代理
		// '/susu': {//修改请求前缀
		//   target: '<url>',
		//   pathRewrite:{'^/api':''},//匹配所有/api换位空字符
		//   ws: true,//用于支持websocket
		//   changeOrigin: true//用于控制请求头中的host值
		// },
  //     }
  //   }
    
    
}

将post请求中的链接改为

http://localhost:8080/userInfo/login

前面为代理服务器链接，后面/userInfo/login为想要访问的路由

这样就能解决跨域问题