开发环境:
前端运行vue,
127.0.0.1:3000
后端django:
127.0.0.1:8000
现在后端返回一个文件的 地址:/media/aaa.pdf
浏览器自动生成的 url: 127.0.0.1:3000/media/aaa.pdf
问题是127.0.0.1:3000/media/aaa.pdf 这个3000是前端的
需要 127.0.0.1:8000/media/aaa.pdf 才是正确,才能访问到这个文件
怎么解决这个问题?
访问的非完整url地址（可以省略协议http:或者https:部分，但是必须//【双斜杠】开头），会自动拼接上当前网址的域名部分，如果是相对地址，还会根据当前路径自动计算出相访问的网址路径，返回绝对地址（就是斜杠开头路径，直接加当前网址域名拼接成要访问的完整url地址）
所以3000端口的网址要访问8000端口的，需要自己前端拼接下，组成完整的url网址
/media/aaa.pdf
==>
//127.0.0.1:8000/media/aaa.pdf
或者
http://127.0.0.1:8000/media/aaa.pdf
https://127.0.0.1:8000/media/aaa.pdf
第一个URL网址缺少http或者https协议，浏览器会根据当前网址协议自动补充对应的协议，不过如果当前网址使用https协议，目标网址只支持http，那么必须要要使用第二种网址，添加上目标网址支持的协议，要不也会无法访问
在文件地址前面拼接http://127.0.0.1:8000就行了
前后端地址不一样，你就别用相对路径了，返回绝对路径
或者后端不要返回url，而是直接读取文件，返回数据流，前端就可以直接下载文件了
否则你在内网测试怎么测都好使，发到外网去，前端在外网能访问，后端在内网，不BBQ了
接口返回文件地址，需要前端页面上拼接一下，用后台的接口进行拼接。
var url = "http://127.0.0.1:8000";
var fullUrl=url + "/media/aaa.pdf";
或者接口返回完整的文件地址
后端返回文件地址的时候返回全路径
例如
http://127.0.0.1:8000/media/aaa.pdf
var url=require(‘url’); var urlObj=url.parse(req.url,true);
var pathName=urlObj.pathname; var newMess=urlObj.query;
回答部分参考、引用ChatGpt以便为您提供更准确的答案：
要解决这个问题，您可以在前端的请求中添加一个代理，将请求转发到后端的地址。具体的解决方案如下：
vue.config.js文件中配置代理。/media路径映射到后端的地址。示例如下：module.exports = {
devServer: {
proxy: {
'/media': {
target: 'http://127.0.0.1:8000', // 后端的地址
changeOrigin: true,
}
}
}
}
127.0.0.1:3000/media/aaa.pdf访问文件时，请求会被代理转发到后端的地址127.0.0.1:8000/media/aaa.pdf，从而正确地获取文件。通过以上步骤，您可以解决前端请求文件时地址不正确的问题，确保文件能够被正确访问到。
这个问题可以通过在前端的请求中指定后端的地址来解决。您可以将文件地址返回给前端时，将其改为绝对地址，例如http://127.0.0.1:8000/media/aaa.pdf。然后，在前端的请求中，将URL的主机和端口改为后端的地址，例如http://127.0.0.1:8000/media/aaa.pdf。这样就可以正确访问到文件了。
另外，您也可以在后端的响应头中添加CORS（跨域资源共享）规则，以允许前端跨域访问后端服务器。具体做法是在Django的settings.py文件中添加以下内容：
CORS_ORIGIN_ALLOW_ALL = True
这将允许来自任何域的跨域请求。如果您需要更精细的控制，可以使用以下代码：
CORS_ORIGIN_WHITELIST = [
'<http://example.com>',
'<https://example.com>',
]
这将允许来自example.com和https://example.com的跨域请求。
文件浏览地址是 后端url+文件路径 ，所以前端拼接路径的时候需要使用后端url进行拼接
你这个是涉及到了跨域的问题吧,你是前后端没法打通 跟你的端口没有关系，我也遇到过,我是React的只要配置一个代理就可以了。
完美解决React 18.2 ＋.net core 5.0 使用代理配置跨域实现word文档生成
前端
首先需要安装
模块 npm install http-proxy-middleware --save
创建一个跨域的js文件 (setupProxy.js)
填写如下代码:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'Your backend request IP address',//注意此处只是ip地址没有接口
changeOrigin: true,
})
);
};
在packpage.json中配置
"proxy": "Your backend request IP address"
最后在你的请求方法中
const generateDoc = async () => {
const options = {
method: 'POST',
url: '/Home/GenerateDocument', // 使用代理前缀路径 这里就是后端的接口 Home=控制器 GenerateDocument=接口
responseType: 'arraybuffer',
headers: {
'Content-Type': 'application/json'
},
//此处传递的对象需要跟后端定义的保持一致
data: JSON.stringify({
Id: 'SL-004',
Title: 'word title',
Content: 'this is word contect'
})
};
try {
const response = await axios(options);
const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'selected-data.docx';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} catch (error) {
console.error(error);
}
};
后端代码 Startup.cs
ConfigureServices方法中添加:
services.AddCors(options =>
{
options.AddDefaultPolicy(builder =>
{
builder.WithOrigins("http://localhost:3000") // 允许来自该域名的跨域请求
.AllowAnyMethod()
.AllowAnyHeader();
});
});
Configure方法中添加:
app.UseCors();
完美解决react18.2 前端请求后端.net core 5.0 的接口实现前端勾选表格中数据再传递给后端接口进行接收生成word文档功能
------------------------------------------------------------------------------------------------------------------------------------------------------------
const generateDoc = async () => {
debugger
// 将 selectedRows 转换为需要的格式
const documents = selectedRows.map(row => ({
id: row.key,
en_name: row.en_name,
zh_name: row.zh_name,
type: row.type,
length: row.length,
editable: row.editable,
visible: row.visible,
enabled: row.enabled
}));
const options = {
method: 'POST',
url: '/Home/GenerateDocument', // 使用代理前缀路径
responseType: 'arraybuffer',
headers: {
'Content-Type': 'application/json'
},
data: { documents: documents } // 将数组对象包装
};
console.log("前端传递数据:",documents);
try {
const response = await axios(options);
const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
const url = window.URL.createObjectURL(blob);
const link =document.createElement('a');
link.href = url;
link.download = 'MySolution.docx';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} catch (error) {
console.error(error);
}
};
后端接口接收
[HttpPost]
public async Task<IActionResult> GenerateDocumentAsync([FromBody] Dictionary<string, List<Document>> data)
{
try
{
var documents = data["documents"];
_logger.LogInformation($"接受的前端数据 document: {JsonConvert.SerializeObject(documents) }");
var documentBytes = await _documentService.GenerateDocumentAsync(documents);
return File(documentBytes, "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "MyDocument.docx");
}
catch (Exception ex)
{
_logger.LogError(ex.Message, ex);
return StatusCode(StatusCodes.Status500InternalServerError, ex.Message);
}
}
public async Task<byte[]> GenerateDocumentAsync(List<Document> documents)
{
MemoryStream mem = new MemoryStream();
using (var doc = DocX.Create(mem))
{
var numRows = documents.Count;
var table = doc.InsertTable(numRows + 1, 8);
..............
}
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------
这个前端配置一下后端返回的地址，使用后端的域名拼接就好了，不要直接使用前端地址拼接
开发环境的 url 访问文件, 端口的问题
https://blog.csdn.net/xiaoxijinger/article/details/119569781
1、第一种方式：写全路径进行访问，http://127.0.0.1:8000/media/aa.pdf
2、第二种方式：vue 项目 可以配置路径代理，百度一下 vue 代理配置 proxy。
要解决这个问题，你需要在前端的Vue应用中配置代理，将请求转发到后端的Django服务器。
在Vue应用的根目录下找到vue.config.js文件（如果没有则可以创建），并添加以下代码：
module.exports = {
devServer: {
proxy: {
'/media': {
target: 'http://127.0.0.1:8000',
changeOrigin: true
}
}
}
}
这段代码将所有以/media开头的请求代理到后端的Django服务器（即http://127.0.0.1:8000）。这样，当浏览器发起请求127.0.0.1:3000/media/aaa.pdf时，Vue应用会将请求转发到Django服务器，并返回正确的文件地址127.0.0.1:8000/media/aaa.pdf。
保存并重新运行Vue应用后，你应该能够通过127.0.0.1:3000/media/aaa.pdf访问到后端返回的文件了。
这个问题可以通过在前端使用代理解决。前端中可以通过 Vue CLI 提供的 vue.config.js 来配置代理。具体的配置方法如下：
在项目根目录下创建 vue.config.js，添加以下配置：
module.exports = {
devServer: {
proxy: {
'/media': {
target: 'http://localhost:8000', // 此处填写你的后端地址
changeOrigin: true
}
}
}
}
上述配置中，target 字段为你的后端的地址，将在代理请求中将前端请求路径中的 /media 字段映射到后端地址中。需要注意的是，使用代理后对于开发服务器和 API 服务器，请求 URI 的路径格式将会有所不同。因此，建议在前端代码编写时，使用相对 URL，例如在 Vue 组件中使用：
axios.get('/media/aaa.pdf')
这样，前端请求路径 /media/aaa.pdf 将会被代理到后端的 http://localhost:8000/media/aaa.pdf。
您可以在前端使用绝对路径来获取文件，而不是相对路径。这样就可以避免混淆前端和后端的端口号了。在您的Vue组件中，您可以使用全局变量process.env来获取当前环境的信息。通过判断当前环境是否为开发环境，您可以动态地构建文件 URL。
以下是一个示例代码：
<template>
<div>
<a :href="fileUrl" download>下载文件</a>
</div>
</template>
<script>
export default {
data() {
return {
fileName: 'aaa.pdf',
};
},
computed: {
fileUrl() {
const baseUrl = process.env.NODE_ENV === 'production' ? '' : 'http://127.0.0.1:8000';
return `${baseUrl}/media/${this.fileName}`;
},
},
};
</script>
这里，我们首先定义了一个 fileName 属性，表示要下载的文件名。然后，通过计算属性 fileUrl 来生成文件 URL。如果当前环境为生产环境，那么 baseUrl 就为空字符串；否则，baseUrl 为后端地址http://127.0.0.1:8000。最后，我们将 baseUrl 和文件名拼接起来，得到完整的文件 URL。
vue里把文件地址前面加上接口路径即可。
已解决，有用请采纳。
2023/6/14 10:14:40
可以使用 Vue.js 的 proxyTable 功能，将前端的请求代理到后端，从而避免跨域问题。在 Vue.js 项目中的 config 文件夹内，可以找到一个名为 index.js 的配置文件，可以在该文件中进行配置。
以下是一个简单的示例：
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/media': {
target: 'http://127.0.0.1:8000',
changeOrigin: true
}
}
}
}
以上配置的含义是将以 /media 开头的请求代理到后端的 http://127.0.0.1:8000 地址，并设置 changeOrigin 为 true，表示改变请求头中的 Origin 字段。
这样，当前端请求 /media/aaa.pdf 文件时，就会被代理到 http://127.0.0.1:8000/media/aaa.pdf 地址，从而可以访问到正确的文件。
你是要部署项目吗 ？？
部署的 需要配置nginx跨域 后端要设置静态目录就OK了
后端返回完整的url或者你前端自行拼接