- 31
- 0
问题描述
开发环境下跨域通过devServer配置处理,请求时采用this.$axios('/api/getList')的形式代理到后端服务器,那到生产环境devServer没有作用的情况下如何给每个请求添加上baseURL而不用一个个去改呢?大家是怎么处理的啊
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
module.exports = {
devServer: {
port: 8000,
proxy: {
'/api': {
"target": "http://servername.com,
"changeOrigin": true,
}
}
}
}
//.......
<script>
export default {
created() {
this.$axios.post('/api/getList').then( res => {
console.log(res)
})
}
}
</script> - 共 0 条
- 全部回答
-
街灯下的背景 普通会员 1楼
在Vue项目开发环境中,跨域是指两个或多个不同的域名或URL之间的通信。以下是一些解决Vue项目跨域问题的方法:
- 使用
JSONP和fetch:JSONP(JSON with Padding)是一种允许在网页中传递JSON数据的协议,但不会跨越服务端限制的方法。使用fetchAPI可以解决这个问题,通过设置Access-Control-Allow-Origin头来允许特定的域进行跨域请求。以下是一个简单的示例:
javascript fetch('https://api.example.com/data', { method: 'GET', headers: { 'Access-Control-Allow-Origin': '*' } }) .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => console.error(error));在这个例子中,
*是允许所有域访问API的域,因为Access-Control-Allow-Origin头会包括*。然而,fetch返回的响应体仍然会被视为HTTP请求,而不是JSON数据。因此,console.log(data)不会打印出JSON数据,而是打印出原始的HTTP响应。- 使用
Proxy:Proxy是一种强大的代理工具,它可以动态修改请求和响应的URL,从而跨越服务端限制。以下是一个使用Proxy的示例:
```javascript const proxy = new Proxy({ 'GET': function(target, path) { const url = target.url(path); url += (target.headers.get('Access-Control-Allow-Origin') || '*') + '/'; return fetch(url, { method: target.method, headers: target.headers }); } }, { 'GET': 'https://api.example.com/data' });
proxy.get('https://api.example.com/data', { success: function(response) { console.log(response); }, error: function(error) { console.error(error); } });
proxy.request('https://api.example.com/data', { success: function(response) { console.log(response); }, error: function(error) { console.error(error); } }); ```
在这个例子中,
proxy.get方法会在目标URL后面添加一个额外的'*',表示任何域都可以访问这个URL。然后,proxy.request方法会使用proxy.get方法获取请求,如果请求成功,它将打印出响应;如果请求失败,它将打印出错误。-
使用CDN(内容分发网络):CDN(内容分发网络)可以将静态资源(如HTML、CSS、JavaScript等)分发到全球各地的服务器上,从而避免了跨域问题。CDN服务提供商通常会提供一个CDN服务器,你可以将Vue项目的HTML、CSS和JavaScript文件托管在CDN服务器上,然后在任何需要的地方通过URL直接访问这些文件,而不需要跨越服务端限制。
-
使用Vue CLI插件:Vue CLI提供了一些插件,如
cors和cors-proxy,可以轻松地解决跨域问题。cors插件可以设置Access-Control-Allow-Origin头,cors-proxy插件可以使用ProxyAPI动态修改请求和响应的URL。以下是一个使用cors插件的例子:
```javascript const cors = require('cors');
Vue.use(cors());
axios.get('https://api.example.com/data', { success: function(response) { console.log(response); }, error: function(error) { console.error(error); } }) .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => console.error(error)); ```
在这个例子中,
axios.get方法在请求成功时将JSON数据发送到服务器,服务器返回响应后,axios.get方法使用cors插件设置Access-Control-Allow-Origin头为*,表示任何域都可以访问这个URL。然后,axios.get方法返回响应体,但不会将其视为JSON数据,而是返回原始的HTTP响应。总的来说,解决Vue项目跨域问题需要根据具体的应用场景和需求选择合适的方法。如果你的应用需要在不同的域名之间进行通信,可以考虑使用
JSONP和fetch;如果你的应用不需要跨域访问,可以使用Proxy;如果你的应用需要使用CDN,可以使用CDN服务提供商提供的CDN服务器;如果你的应用需要使用Vue CLI插件,可以使用cors插件。 - 使用
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
