前端常见的跨域方式以及解决办法，未完待续。。。

缺乏、安全感 2022-12-29 09:14 86阅读 0赞

前端厂家你的跨域方式为：CORS，JSONP，反向代理；

CORS跨域：CORS解决跨域的一个关键点就是服务器，只要服务器实现了CORS接口就可以实现跨域，直接让后台人员设置就好，前端照常请求；  
“Access-Control-Allow-Origin:\*”

JSONP跨域：动态创建script标签，然后利用script的src 不受同源策略约束来跨域获取数据，主要就是通过script标签来请求数据；  
JSONP由两部分组成：回调函数 和 数据，这个回调函数一定要告诉后端让后端来将实参写进去；  
回调函数就是响应来的时候被调用，回调函数里面的参数就是数据，在回调函数中操作数据；  
在script的src属性中写入接口地址，后面跟那个全局回调函数：

script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=回调函数名";

第一种js方式的步骤：  
1，定义一个全局的一个回调函数；  
2，创建一个script标签，指定src请求的地址；  
3，调用创建这个函数即可生成script标签去请求；

function jsonpProcess (data) { 
    	console.log(data)
    }
    function jsonp_Script () { 
    	var _script = document.createElement("script");
    	_script.type = "text/javascript";
    	_script.src = "http://api.douban.com/v2/movie/top250?start=25&count=30&callback=jsonpProcess";
    	document.head.appendChild(_script)
    }
    jsonp_Script();

第二种使用jquery ajax 的方式：

function jsonp_jquery () { 
    	var url = "http://api.douban.com/v2/movie/top250"
    	var data = JSON.stringify({ 
    		"start": 25,
    		"count": 30
    	})
    	$.ajax({ 
    		type: "GET",
    		url: url,
    		data: data,
    		dataType: "jsonp",
    		jsonpCallback: "jsonpProcess", // jsonpProcess为回调函数
    		success: function (res) { 
    			console.log(res)
    		}
    	});
    }
    jsonp_jquery();

在实际的项目中用webpack来解决跨域，webpack的跨域配置在 devServer.proxy 中：

module.exports = { 
      //...
      devServer: { 
        proxy: { 
          '/api': {    // 进行地址的一个匹配
              target: 'http://target.com:3000',   // 需要请求的真实服务器地址
              changeOrigin: true,   // 允许跨域
              ws: true,
              pathRewrite: { 
                  '^/api': ''     // 将以api开头的前面配置成空
              }
          }
        }
      }
    };