**什么情况下会出现跨域问题？（同源策略）.是如何解决的？

跨域是由于浏览器的同源策略造成的，是浏览器施加的安全限制

同源策略是：拥有相同的协议、域名、端口号的网址间才可以相互访问资源；

只有自己当前的域，与访问的域的协议、域名、端口号，都相等，才是同源。如果三者有一个不同，就属于跨域，就会出现跨域问题。如果是协议和端口造成的跨域问题，前端无法处理；是否跨域，仅仅通过URL的首部来判断，不会通过域名对应的IP地址是否相同来判断；跨域并不是请求发不出去，而是请求发出去了，也正常返回结果了，但是结果被浏览器拦截了。

解决办法：

1.利用JSONP方式解决跨域。JSONP跨域仅支持GET请求；主要是解决jQuery和原生js的跨域问题的。如：在$.ajax({})中设置dataType：'JSONP'

   2.Vue是用代理来解决的:在vue.config.js中添加配置项 devServer

   原理：前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器承担中转站的角色，绕开浏览器，将响应数据返回给前端

    devServer: {
    proxy: {
      // 自定义请求的开头,使用代理方式处理/api开头的请求,/xxx可以自定义
      "/api": {
        // 往哪个服务器发请求
        target: "http://localhost:8080",//源地址 （接口域名）
        ws: true,//用于支持websocket长链接
        changeOrigin: true//改变源 （是否跨域）默认为true
        pathRewrite: {"^/api": "",}// 路径重写，把api替换为空字符串，因为/api并不是请求的一部分,只是个代理的标识
      },
    },
  } 
  在进行axios网络请求时：
  this.axios({
        method: "get",
        url: "/api/getTest",
      }).then((res) => {
        console.log(res.data);
      }
  })

总结：代理服务和前端服务之间由于协议、域名、端口三者统一不存在跨域问题，可以直接发送请求；代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求；修改配置文件后重启项目；注意：代理(proxy)实现跨域只限于开发状态下使用，因为非开发版并没有内置服务器

**什么情况下会出现跨域问题？（同源策略）.是如何解决的？

猜你喜欢