vue打包的app跨域

Vue 打包的 APP 跨域（原理或详细介绍）

在开发网站的过程中，不可避免地会遇到跨域问题。跨域是指浏览器为了保护用户，实行的一种安全策略，阻止一个网页上的请求同时访问另一个域名的资源。在 Vue 的应用开发中，如何实现跨域能力以便在打包后的 APP 中正常工作，是一个需要重点关注的问题。本文将对 Vue APP 的跨域原理进行详细解释，并给出相应的解决方案。

跨域限制的来源

跨域限制是由浏览器的同源策略（Same-Origin Policy）所导致的。同源策略要求一个网页上的请求必须与请求源页面站点协议、域名和端口保持一致。当请求与源站点不符时，浏览器就会阻止脚本的访问。

跨域的常见场景

1. 通过 XMLHttpRequest 或 Fetch 发送的请求。

2. API 资源是被请求页面所依赖的其他域。

3. 在 Vue 打包的静态 Web APP 中需要请求 API。

4. 在开发过程中，前端运行服务器和后台 API 服务器的端口号和域名不同。

跨域解决方案

针对 Vue 应用开发的跨域问题，可以使用以下几种方案来解决。

1. CORS 跨域

CORS（Cross-Origin Resource Sharing）跨域资源共享，在服务端正确认为需要跨域的请求，并通过响应头信息中的 Access-Control-* 字段来控制请求域的权限。这种方法实现跨域，需要配合后端服务器设置响应头，来允许客户端发送跨域请求。

2. JSONP

JSONP（JSON with Padding）是一种常用的解决跨域问题的方法，其原理是利用 script 标签的跨域属性，动态添加 script 标签并通过回调函数处理返回结果。这种方式比较古老且不安全，已经逐渐被 CORS 替代。在非限制极端条件下可以考虑使用 JSONP。

3. Vue DevServer 代理

在开发 Vue 应用时，可以使用 Vue-CLI 提供的 DevServer 进行开发。通过配置 DevServer 的代理设置，可以将 API 请求代理到指定的服务器，从而实现由 DevServer 到 API 服务器的跨域。这种方法仅限于开发环境中使用。

详细配置如下：

在 Vue 项目中，修改 `vue.config.js` 文件并新建或者修改 `devServer` 的相关配置，以下是一个简单的配置示例：

```javascript

module.exports = {

devServer: {

proxy: {

'/api': {

target: 'https://your-api-server.com',

pathRewrite: { '^/api': '' },

changeOrigin: true,

},

},

},

};

```

4. 应用内置服务器

使用 Cordova、PhoneGap 或 Electron 等封装工具打包的 APP，可通过配置内置服务器或者 Webview 客户端解决跨域问题。例如，在 Electron 中直接绕过浏览器的同源策略问题,提高了开发和调试的便利性。

总结

跨域的问题在现代 Web 开发中仍然很常见，是需要前端工程师重点关注的地方。在 Vue 打包的 APP 开发中，可以通过 CORS 配置、JSONP 以及使用 DevServer 代理等方式实现应用的跨域能力。需要有针对性地选择解决方案，确保跨域请求在打包后的 APP 中正常工作，同时保证应用的安全性。