基于Vue的网页项目输验证码登录时在Chrome下报错500而Firefox没有任何问题

具体情况

一个Vue项目，在登录页面点击登录按钮没有反应，点开F12控制台发现请求的接口报500错误，此时用的是Chrome浏览器，而当我转到Firefox浏览器的时候再次尝试登录发现，一切正常

原因分析：

不能理解为什么Firefox没有问题，但我认为可能是因为跨域出现了问题，起初我的想法是：会不会因为谷歌对于cookie的要求很严格，我必须设置SameSite=None，但是后来发现不需要，只要更改vue项目里的request.js和vue.config.js即可

解决方案：

在request.js中有一段代码如下：

const service = axios.create({
//  baseURL: 'http://xxx.xxxxx.xxx'
  baseURL: '/api',
  withCredentials: true,
  timeout: 60000
})

将其中的baseURL:'http://xxx.xxxxx.xxx'更改为baseURL:'/api'

而在vue.config.js中有一段代码如下：

proxy: {
      	'/api': {
        	// target: 'http://localhost:8088',
        	target: 'https://xxx.xxxxx.xxx',
        	changeOrigin: true,
        	pathRewrite: {
          		'^/api': ''
        	},
      	},

将其中的target:'xxx'改成服务器的地址target:'https://xxx.xxxxx.xxx'

同时不要忽视了pathRewrite，如果你js的request请求中的url是’/login’，那么request.js就会把他改成'/api/login'，而vue.config.js会继续改成'https://xxx.xxxxx.xxx/login'，所以当你写的是'^/api': '/'时。最终会被改写成'https://xxx.xxxxx.xxx//login'，这样可能会出现报错，注意下。