vue3 用axios访问本机webapi，引发同源策略禁止读取

您可以通过在后端添加 CORS 头来解决这个问题。在 Web API 的响应中添加以下头：

Access-Control-Allow-Origin: *

这将允许来自任何域的请求访问您的 Web API。如果您只想允许特定的域，则可以将 * 替换为该域的 URL。

相关问题

.NET WebApi Vue

### 集成.NET WebAPI与Vue.js的最佳实践

#### 使用RESTful API通信
为了实现.NET WebAPI和Vue.js之间的高效交互，采用RESTful架构风格是一个理想的选择。通过定义清晰的资源端点，在前端利用`axios`库发起HTTP请求来获取数据或提交表单[^1]。

// 创建一个Axios实例用于配置默认设置
const instance = axios.create({
    baseURL: 'https://api.example.com/',
    timeout: 1000,
});

// 发送GET请求到WebAPI读取数据
instance.get('/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('There was an error!', error);
});

#### 处理跨域资源共享(CORS)
当Vue应用部署于不同域名下时，需确保.NET Core应用程序已启用CORS策略允许来自特定源的请求访问API接口[^2]。

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowSpecificOrigin",
            builder => builder.WithOrigins("http://localhost:8080")
                              .AllowAnyHeader()
                              .AllowAnyMethod());
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRouting();
    
    app.UseCors("AllowSpecificOrigin");

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

#### 数据验证与错误处理
前后端都应实施严格的数据校验逻辑防止非法输入造成安全漏洞；同时针对可能出现的各种异常情况设计友好的提示信息返回给客户端显示[^3]。

{
  "status": false,
  "message": "Invalid email format.",
  "errors": [
    {"field":"email","error":"The Email field is not a valid e-mail address."}]
}

写一个基于Vue3 + webApi 的 DevExpress XtraReport 报表打印前后端案例

好的，我可以为您提供一个基于Vue3和webApi的DevExpress XtraReport报表打印前后端案例。

首先，您需要在DevExpress报表设计器中创建XtraReport报表。确保您已经启用了打印功能，并为报表指定了打印机。

接下来，您需要将报表导出为HTML格式，并将其作为WebApi中的静态文件进行部署。

以下是一个基于Vue3的报表打印组件示例代码：

<template>
  <div>
    <iframe ref="reportFrame" :src="reportUrl" frameborder="0" width="0" height="0"></iframe>
    <button @click="printReport">打印报表</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ReportPrinter',

  data() {
    return {
      reportUrl: ''
    }
  },

  mounted() {
    this.loadReport()
  },

  methods: {
    async loadReport() {
      const response = await axios.get('/api/report.html')
      this.reportUrl = `data:text/html;base64,${btoa(response.data)}`
    },

    printReport() {
      const reportFrame = this.$refs.reportFrame
      const reportWindow = reportFrame.contentWindow

      if (reportWindow) {
        reportWindow.print()
      }
    }
  }
}
</script>

在这个组件中，我们使用了一个iframe元素来加载报表。我们还在组件中添加了一个打印按钮，用户可以单击该按钮来打印报表。

在打印按钮的click事件处理程序中，我们获取报表iframe的contentWindow对象，并调用其print方法来触发打印操作。

在WebApi中，您需要提供一个接口来获取报表HTML文件的内容。以下是一个示例代码：

[HttpGet("api/report.html")]
public async Task<IActionResult> GetReportHtml()
{
    var reportPath = "path/to/report.html";
    var reportContent = await System.IO.File.ReadAllTextAsync(reportPath);
    return Content(reportContent, "text/html");
}

在这个控制器中，我们使用了System.IO.File类来读取报表HTML文件的内容，并将其作为文本/HTML内容返回给客户端。

请注意，这只是一个简单的示例代码，您需要根据您的具体要求进行修改和定制。

希望这能帮助您开始构建基于Vue3和webApi的DevExpress XtraReport报表打印应用程序！