vue 开发时解决跨域问题和mock数据

什么是跨域

浏览器跨域问题是指在浏览器中，当一个网页的脚本试图访问另一个网页的资源时，由于安全策略的限制而失败。跨域问题是由于浏览器的同源策略造成的。

同源策略是指，当一个脚本在浏览器中访问另一个资源时，只有当两个资源的协议、域名和端口号都相同，才被认为是同源的，才允许进行访问。例如，一个网页（www.example.com）中的 JavaScript 脚本，只能访问同一域名下的资源（如 www.example.com/index.html）… www.baidu.com）。

跨域问题通常是由于需要访问其他域名下的资源，而浏览器的同源策略限制了访问。在开发 Web 应用程序时，跨域问题是一个常见的问题，特别是在使用 AJAX 和 WebSocket 等技术时。为了解决这个问题，可以使用跨域解决方案，如 JSONP、CORS、代理等。

sequenceDiagram
浏览器->>前端开发服务器: http://localhost:8080/
前端开发服务器->>浏览器: 页面
浏览器->>后端测试服务器: ajax 跨域：http://test-data:3000/api/news
后端测试服务器->>浏览器: JSON数据
rect rgb(224,74,74)
Note right of 浏览器: 浏览器阻止数据移交
end

如图,js脚本是运行在开发服务器上,源是http://localhost:8080,请求的是http://test-data:3000,不同源导致请求失败

生产环境没有跨域问题

sequenceDiagram
浏览器->>服务器: http://www.my-site.com/
服务器->>浏览器: 页面
浏览器->>服务器: ajax：http://www.my-site.com/api/news
服务器->>浏览器: JSON数据

由于生产环境和服务器是同源的,可以获得数据

解决开发环境的跨域问题

sequenceDiagram
浏览器->>前端开发服务器: http://localhost:8080/
前端开发服务器->>浏览器: 页面
浏览器->>前端开发服务器: ajax：http://localhost:8080/api/news
前端开发服务器->>后端测试服务器: 代理请求：http://test-data:3000/api/news
后端测试服务器->>前端开发服务器: JSON数据
前端开发服务器->>浏览器: JSON数据

方法

请求向开发服务器请求,开发服务器代理请求,开发服务器接收请求,然后返回浏览器, 此时的浏览器的通信的源和开发服务器是同源的,不会被拦截

配置 vue.config.js

devServer: {
  proxy: {
    "/api": {
      target: "https://XX.XX.XX.XX:8081",
      changeOrigin: true,
      ws: true,
      secure: false,
    },
  },
},
// "/abc":{} : 引号中代表监测的是以 /abc 开头的接口
// target : 代表监测到以 /abc 开头的接口后，把axios请求中前面的本地服务器地址改为后端接口地址，实际发送给后端的请求就是下方后一个请求：http://localhost:8080/abc/def -->http://XX.XX.XX.XX:8081/abc/def
// changeOrigin : 是否跨域
// ws : 如果要代理 websockets，配置这个参数
// secure : 如果是https接口，需要配置这个参数，注：代理https时参数值必须为false（如果是http接口，也可以不写这个参数）
// pathRewrite ：替换请求中匹配的内容。在3的方法2中详细解释用法，上方未使用此参数

此时网络请求就被开发服务器代理了.

配置mock

由于后端接口没有完成此时需要数据请求,使用mock 模拟数据 要使 mock.js 在 Vue 项目的 main.js 中生效，需要在 main.js 中引入 mock.js 并设置模拟数据的路由。以下是具体步骤：

1. 安装 mock.js：

codenpm install mockjs --save-dev

2. 在 main.js 中引入 mock.js，并设置模拟数据的路由。例如，可以在 main.js 中添加以下代码：

import Mock from 'mockjs'
import { mockData } from './mock' // 引入模拟数据

Mock.setup({
  timeout: 1000 // 设置响应时间
})

Mock.mock(`/api/banner`, 'get', mockData) // 设置模拟数据的路由

3. 在 mock.js 中编写模拟数据。例如，可以在 mock.js 中添加以下代码：

import Mock from 'mockjs'

const mockData = Mock.mock({
  'list|10': [{
    'id|+1': 1,
    'name': '@cname'
  }]
})

export { mockData }

在main.js import 就可以生效