vue中发送ajax请求

1.同源策略

定义：同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。

作用：它能帮助阻隔恶意文档，减少可能被攻击的媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS 脚本，从第三方网络邮件服务（用户已登录）或公司内网（因没有公共 IP 地址而受到保护，不会被攻击者直接访问）读取数据，并将这些数据转发给攻击者。

同源定义：如果两个 URL 的协议、端口（如果有指定的话）和主机都相同的话，则这两个 URL 是同源的。

2.跨域请求

定义：一个源访问另一个源的资源时即为「跨源」，最常见的跨源场景是域名不同，即常说的“跨域”。

解决跨域请求方案：

• JSONP（JSON with Padding） 使用script标签引入外部资源，不受同源策略限制。只有Get请求有用。
• CORS（Cross-Origin Resource Sharing）
• Websocket。
• 代理服务器
  • ngnix
  • Vue-cli

3.vue脚手架配置代理

基础知识：服务器与服务器之间不存在同源策略问题。同源策略是浏览器上为安全性考虑实施的安全策略。

浏览器 ==> 代理服务器 ==> 资源服务器

资源服务器 ==> 代理服务器 ==> 浏览器

其中: 浏览器与代理服务器之间同源。

Vue-cli具体实现方法：

开启的本地代理服务器的根目录就是public文件夹。

方法一

​在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。（public文件夹即代理服务器中有就不转发。）
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方法二

​编写vue.config.js配置具体代理规则：

module.exports = {
    devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。