前端跨域解决方案

什么是跨域？

• 跨域是浏览器为了安全而做出的限制策略
• 浏览器请求必须遵循同源策略：同域名、同端口、同协议

怎样解决跨域问题？

解决跨域的三种方法：

• CORS跨域
• JSONP跨域
• 代理跨域

CORS跨域：

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
CORS通信与同源的AJAX通信代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。
使用方法:在response添加Access-Control-Allow-Origin，
例如Access-Control-Allow-Origin:www.google.com也可以设置为 * 表示该资源谁都可以用
CORS请求默认不发送Cookie和HTTP认证信息。
如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。
另一方面，开发者必须在AJAX请求中打开withCredentials属性。否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。
————————————————
版权声明：本文为CSDN博主「Chandler丶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ouzhuangzhuang/article/details/83826868

前端不用进行设置，后端直接添加上一段代码就可以

后端直接设置允许某个域名进行访问

header('Access-Control-Allow-Origin:https://segmentfault.com')

或者允许所有域名进行访问

header('Access-Control-Allow-Origin:*')

JSONP跨域：

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。
JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

JSONP跨域需要前端和后端同时设置。
基本使用方法：
前端：
动态创建<script>标签，设置其src，回调函数在src中设置：

var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。

function handleResponse(res){
    // 对response数据进行操作代码
    alert(JSON.stringify(res));
}

后端：
需要对传来的参数进行处理，将回调取出并且发送给浏览器。

jsonp缺点：只能实现get一种请求。

代理跨域

前端修改nginx服务器配置，后端不动。

比如我们本地服务是http：//127.0.0.1:8080，我们想要请求http：//127.0.0.1:9090/getData接口

在vue.config.js里面：

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        // devServer.proxy 如果你的前端应用和后端 API 服务器
        // 没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。
        proxy: {
            '/api': {
            // 一旦devServer(5000)服务器接收到 /api/xxx 的请求，就会把请求转发到另一个服务器(http：//127.0.0.1:9090)
            // 浏览器和服务器之间有跨域，但是服务器和服务器之间没有跨域
                target: "http：//127.0.0.1:9090",<!--请求的接口-->
                changeOrigin: true, //是否跨域
                secure: false,  // 如果是https接口，需要配置这个参数
                pathRewrite: { 
                    '/api': ''
                }
            }
        }
    }
}

pathRewrite设置将前台传来的以/api开头的请求全部替换为空。比如前台请求为http://127.0.0.1:8080/api/getData，那么实际请求地址是http://127.0.0.1:9090/getData
在请求的页面：

axios.get("api/getData")
      .then((data)=>{
        console.log(data);
      })

此时，虽然请求发送到了：http://localhost:8080/api/getData/,但是已经代理到了http：//127.0.0.1:9090/getData/上边

本文转载自：
https://segmentfault.com/a/1190000022268996?utm_source=sf-similar-article
更全面的跨域方法：
前端常见跨域解决方案（全）