ajax同源限制

ajax請求限制:

ajax只能向同源發送請求，而不同源無法發送請求

解決方法

1 - JSONP(前後端配合)

JOSONP並不是AJAX的一種，而是繞過伺服器的方法，達到和AJAX同樣的效果
前端在

<script>
		function fn2 (data) {
			console.log('客户端的fn函数被调用了')
			console.log(data);
		}
	</script>
		<script src='http//:localhost:3000/test'>	</script>

JSONP封裝函數

後端

已node為範例

app.get('/test',(req,res)=>{
	const result='fn({name:jack})'
	send(fn)
	}

CROS(cross–origin-resource-sharing) (只需後端)

即跨域資源共享，它允許瀏覽器向跨域資源的服務器發出請求，這種作法只要服務器端設定後即可讓他人訪問

只要服務器在代碼裡加上 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 表示誰可以訪問服務器 和 用哪種方式(get/post)即可讓其他人使用ajax發送請求

// 拦截所有请求
app.use((req, res, next) => {
	// 1.允许哪些客户端访问我
	// * 代表允许所有的客户端访问我
	// 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
	res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
	// 2.允许客户端使用哪些请求方法访问我
	res.header('Access-Control-Allow-Methods', 'get,post')
	// 允许客户端发送跨域请求时携带cookie信息
	res.header('Access-Control-Allow-Credentials', true);
	next();
});
app.get('/cross', (req, res) => {
	res.send('ok')
});

案例:openweather
常見的獲取天氣api在openweather裡就是使用此方式

伺服器請求伺服器(只需後端)

AJAX的同源限制是瀏覽器給AJAX，但是伺服器跟伺服器之間是沒有同源限制的
換句話說，我們可以像自己的伺服器發送請求，再讓自己的伺服器向第三方發送請求!!

後端:
後端部分已NODE為主，需要安裝 request插件

app.get('/server', (req, res) => {
	request('http://localhost:3001/cross', (err, response, body) => {
		res.send(body);
	})
});

前端:
前端部分就和平常調用ajax那樣就可以

	btn.onclick = function () {
			ajax({
				type: 'get',
				url: 'http://localhost:3000/server',
				success: function (data) {
					console.log(data);
				}
			})
		};