vue3项目打包上传hostinger跨域失败?

Question

vue3项目我在本地成功配置了跨域进行axios请求成功,我需要对文件进行打包上传到hostinger地址中,hostinger项目跨域请求失败,出现问题405

希望可以解决

Answer 1

跨域浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run dev等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了亦曾代理，因为不会出现跨域问题。所以跨域的配置只能在dev下生效,当你打包成静态资源,他不依赖与node了,跨域也不生效了,还是得api接口设置跨域配置

Answer 2

这个问题可能是由于你的 Vue3 项目在 Hostinger 服务器上没有正确配置跨域策略导致的。以下是可能的解决方案：

1. 配置 CORS (跨域资源共享)：你需要在 Hostinger 服务器上配置 CORS，以允许你的 Vue3 应用程序发出跨域请求。这通常需要在服务器端进行配置，具体的步骤可能因服务器类型和框架而异。

* 如果你正在使用 Express.js，你可以使用 `cors` 中间件来轻松地启用 CORS。只需在你的 Express 应用中添加 `var cors = require('cors');`，然后使用 `app.use(cors());` 来启用 CORS。* 如果你正在使用 Apache，你可以在 `.htaccess` 文件中添加以下内容以启用 CORS：```apache`Header set Access-Control-Allow-Origin "*"Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"Header set Access-Control-Allow-Headers "Content-Type, Authorization"````注意：上述配置可能会对你的应用程序的安全性产生影响，因为它允许来自任何域的跨域请求。在实际生产环境中，你应该将 `Access-Control-Allow-Origin` 设置为你的 Vue3 应用程序的域名。

2. 检查请求方法：在你的 Vue3 应用程序中，你可能正在使用一些不允许的 HTTP 方法。例如，GET 和 DELETE 请求通常不需要 CORS 策略，而 POST 和 PUT 请求则需要正确的请求头。请确保你的请求方法与服务器上设置的 CORS 策略匹配。
3. 检查请求头：某些请求头可能需要在服务器上特别配置。例如，如果你正在使用 Vue3 的 Axios 插件进行身份验证，你可能需要将 Authorization 头添加到你的请求中。在服务器上配置 CORS 时，确保包含这些可能需要配置的请求头。
4. 检查代理设置：如果你正在使用 Vue3 的内建开发服务器（例如 vue-cli-service serve）或某些构建工具（例如 Webpack）的代理功能，确保代理设置正确并且支持跨域请求。你可能需要为你的 Hostinger 服务器配置一个反向代理，以便将所有跨域请求转发到你的 Vue3 应用程序。
5. 使用 JSONP：如果你的 Hostinger 服务器不支持 CORS，你可能会遇到困难。在这种情况下，你可以考虑使用 JSONP 来绕过这个问题。JSONP 是通过在 <script> 标签中插入一个跨域脚本标记来实现的，这使得你可以从另一个域获取 JSON 数据。然而，请注意，这可能会带来安全风险，因为它使你的应用程序容易受到跨站脚本攻击（XSS）。
6. 检查 Hostinger 的文档：最后，你可以查看 Hostinger 的文档或联系他们的支持团队，以了解他们对于跨域请求的具体要求和最佳实践。他们可能已经提供了关于如何配置你的服务器以接受跨域请求的详细指南。