跨域请求的解决方式

在解决跨域问题之前，需要了解什么是跨域？什么是同源策略？

1、同源策略：协议、域名、端口都相同才叫同源。

2、跨域：当协议、域名、端口中有一个不相同的时候，都属于跨域请求，

 例如：http://127.0.0.1/8080向http://127.0.0.1/8025/api/searvh发送请求,两者的端口号不同，所哟一属于跨域请求

3、同源策略的目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。 设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？ 很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。 由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。所以服务器为了保护数据安全，只允许同源请求获取响应体数据，如果是跨域请求，不能正确的获取响应体数据，会有跨域访问报错。

4、cros解决跨域问题 

cros是后端程序提供的解决跨域访问的方法，和前端程序没有任何关系。

定义后端程序代码让所有的前端程序都可以访问后端的数据，后端程序告诉服务器这个后端程序的数据，任何前端请求都可以访问，服务器就不再执行跨域访问拦截数据的操作,其实就是设置请求头

res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', ['mytoken','Content-Type']);

5、使用JSONP解决跨域问题

基本原理

使用script标签src属性值，完成跨域请求。script标签src属性，定义导入加载的外部文件的路径地址，也就是同时src属性可以导入加载外部文件。服务器对于src要导入的文件，如果路径是跨域路径，服务器本身不会阻止；也就是src的路径地址，如果是跨域请求的路径地址，服务器也不会阻止，可以正常加载导入文件。

对于src属性导入的外部文件，不管是什么类型的文件，都会按照JavaScript语法执行外部文件中定义输出的内容，也就是只要导入的文件内容符合JavaScript语法，就会按照JavaScript程序执行。

总结jsonp完成跨域的原理

1、服务器对于src的跨域请求不会阻止。

2、script标签src导入的外部文件，内容/输出 都会按照JavaScript语法程序执行。

jsop解决跨域问题的缺点

1、只支持 GET 方法请求，不管 AJAX 中实际的请求方法是不是 GET

2、服务端还需要修改代码

3、发送的不是 XHR 请求，无法使用 XHR 对象（但这也是为什么可以解决跨域问题的根本）

 6、服务器代理 proxy

当浏览器端向服务端发送跨域请求的时候，服务端会拒绝浏览器的快于请求，不会给出相对性的响应。

 这个时候我需要一个代理将我们的请求转发给服务器端，然后再将服务器端许哦出的响应返回给浏览器端。

 使用vite创建的vue项目，修改vite.config.js配置文件

 // vite.config.js
 server: {
    host: "127.0.0.1", // ip
    port: 8080,  // 端口号
    open: false,  // 是否自动在浏览器打开
    https: false, // 是否开启 https
    // 跨域代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:8000/api/', // 目标地址
        changeOrigin: true, // 是否允许跨域
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }