vue 请求public下面的json文件打包后跨域

如果您在 Vue 应用中使用 Axios 或 Fetch 进行请求 public 目录下的 JSON 文件，在打包后可能会遇到跨域问题。

解决方法是在打包后的服务器上进行配置，让服务器允许跨域请求。您可以在服务器端的响应头中添加 Access-Control-Allow-Origin 字段，允许指定的域名进行跨域请求。例如：

Access-Control-Allow-Origin: * // 允许所有域名进行跨域请求

如果使用的是 Nginx 服务器，可以在 Nginx 的配置文件中添加以下配置：

location /public {
    add_header 'Access-Control-Allow-Origin' '*';
}

这样在访问 public 目录下的文件时就可以避免跨域问题了。

相关问题

vue thinkphp6跨域

在Vue和ThinkPHP 6中实现跨域请求可以通过以下步骤完成：

1. 在ThinkPHP 6项目中，在`config`目录下找到`cors.php`文件（如果不存在则新建），并添加以下配置：

<?php
// config/cors.php

return [
    // 允许的域名列表，可以使用通配符 *
    'allowed_origins' => ['*'],
    // 允许的请求方法列表
    'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE'],
    // 允许的请求头列表
    'allowed_headers' => ['*'],
    // 是否允许发送 Cookie
    'allow_credentials' => false,
    // 预检请求的有效期，单位为秒
    'max_age' => 0,
];

这里配置了允许任意域名的跨域请求，并且允许常用的请求方法和请求头。

2. 在`public`目录下找到`index.php`文件，在文件开头添加以下代码：

<?php
// public/index.php

// 添加以下代码
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

// ...

// 创建应用实例
$app = \think\App::getInstance();

// ...

这里设置了响应头，允许任意域名的跨域请求，并允许常用的请求方法和请求头。

3. 在Vue项目中，可以使用axios库发送跨域请求。在需要发送跨域请求的地方，例如Vue组件中，可以这样使用：

import axios from 'axios';

// ...

axios.get('http://example.com/api/data', {
  // 可选：设置请求头
  headers: {
    'Content-Type': 'application/json',
  },
}).then(response => {
  // 处理响应数据
}).catch(error => {
  // 处理错误
});

在这个例子中，我们使用了`axios.get()`发送了一个跨域的GET请求，并设置了`Content-Type`请求头。

这样配置后，Vue和ThinkPHP 6之间的跨域请求应该就能正常工作了。记得根据实际需求修改配置，例如允许的域名、请求方法和请求头。

C:/Users/Administrator/Desktop/潮流男鞋/pages/public/login.vue' at pages.json:1

回答: 根据引用\[1\]和引用\[2\]的内容，你在本地打开的文件使用的是file协议，而file协议不支持跨域请求。只有http、data、chrome、chrome-extension、chrome-untrusted、https这些协议是支持跨域请求的。因此，当你在浏览器地址栏中显示的不是这些协议时，就会出现CORS策略阻止访问的错误。在你提供的问题中，显示的路径是一个本地文件路径，而不是一个支持跨域请求的协议。因此，你需要将文件部署到一个支持跨域请求的服务器上，或者使用支持跨域请求的协议来打开文件。
#### 引用[.reference_title]
- *1* *2* [html中使用es6模块，报错：Access to script at ‘file:///C:/Users/joney/Desktop...](https://blog.csdn.net/qq_45890970/article/details/123546302)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]