同源策略和请求跨域问题的解决方案

同源策略和请求跨域问题的解决方案

一、同源策略

是浏览器独有的一种约定，是最基本的安全功能。在浏览器和服务器通信的过程中，如果协议、域名和端口号三者相同则为同源，有一个不一样，就会产生请求跨域的问题，浏览器就会拒绝接受服务端返回的数据

二、跨域问题解决方案

1. jsonp: 古老的解决方案，只支持get请求；
2. 服务器端：cors跨域： 设置响应请求头
res.header("Access-Control-Allow-Origin", "*"); // 允许所有的地址访问该服务器
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); // 允许可以跨域的请求方式
res.header('Access-Control-Allow-Headers', ['mytoken', 'Content-Type']); // 允许的请求头设置的内容类型
3. 服务器端： nginx服务器解决：修改nginx的配置文件
4. 前端处理： vue代理服务器跨域: 跨域只存在于浏览器和服务器通信的时候，vue开启了一个同源的虚拟服务器，服务器之间不会跨域，利用虚拟服务器获取真实服务器上的数据，在给到浏览器即可

三、Vue代理解决跨域问题

一般不需要前端解决，以防万一，公司后端菜的抠脚 ^ - ^

// 在vue.config.js文件中进行配置

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: 'localhost', // 启动的本地项目地址
    port: 9090, // 本地项目端口
    open: true, // 默认打开浏览器
    // proxy: 'http://localhost:8848' // 针对于只有一个后台服务器地址
    proxy: {  // 针对具有多个后台服务器地址
      '/api': {
        target: 'http://localhost:8848', // 发送请求到哪个服务器
        ws: true, // 是否开启websocket
        changeOrigin: true, // 是否支持跨域
        pathRewrite: { "^/api": "" }, // 重写路径，将/api替换成空字符串
      },
      '/info': {
        target: 'http://localhost:9999',
        ws: true,
        changeOrigin: true,
        pathRewrite: { "^/info": '' }
      }
    }
  }
})