在Vue中，使用Proxy代理解决跨域问题的方法

你好，以下是我根据你提供的信息重构的内容：

声明：

前端axios在本地发送请求时，如果不把路径写全，它会默认加上自己项目所在的端口。例如：

```javascript

axios.get('/login')

axios.get('/hello')

```

当点击发送按钮之后，以上两行代码实际为：

```http://localhost:8080/login

http://localhost:8080/hello

```其中 localhost:8080 就是自己项目所在的地址了。实际前端就会根据以上的地址来访问后端程序了。

跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。前后端分离的模式下，前后端的域名是不一致的，所以就会出现跨域问题。

解决方案有很多种，比如：jsonp、cors、Node代理、nginx反向代理等。这里我们只讨论 proxy。vue中的proxy就是利用了Node代理。代理服务器通过特定规则将地址转换为后端接口，并请求后端接口，这样就解决了跨域的问题了。前端vue中可以通过proxy配置来实现代理服务器。例如：

```javascript

{

"dev": {

"proxy": {

"pathRewrite": {"^/api": ""},

"target": "http://www.aaabbbccc.com"

}

}

}

```

好的，我可以帮你重构这段内容。以下是重构后的内容：

以vue cli3.0为例，以上配置中，我配置了一个 /api,只有包含这个请求的路径才会走代理。例如，http://localhost:8080/api/login 这个就可以走代理，而 http://localhost:8080/login 这个就不行。如果想要所有的请求都进入代理中，就必须包含/api这个路径。那么我可以对axios进行二次封装，给所有的请求加这个前缀。代码如下：

发送请求可以写为：

```javascript

axios.get('/api/login')

axios.get('/api/getlist')

axios.get('/api/user/hello')

```

此时我发送的请求就是：`http://localhost:8080/api/login`、`http://localhost:8080/api/getlist`、`http://localhost:8080/api/user/hello`。通过代理的 target属性加工之后就是：`http://www.aaabbbccc.com/api/login`、`http://www.aaabbbccc.com/api/getlist`、`http://www.aaabbbccc.com/api/user/hello`,也就是把 `/api` 之前的路径修改成了 target里配置的目标服务器的路径。

接下来，通过 pathRewrite属性将 `/api` 替换为空，得到：

```javascript

axios.get('http://www.aaabbbccc.com/login')

axios.get('http://www.aaabbbccc.com/getlist')

axios.get('http://www.aaabbbccc.com/user/hello')

```

这样就可以访问到后端的对应接口了。总结一下，以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。