下面我以簡單的兩臺node服務器來說明如何使用nginx進行前端跨域訪問。

node1服務器 在localhost：8083上啟動

const app = express(); app.get('/web/users',(req, res)=>{res.json([{name:"張三",age:12},{name:"李四",age:14}]);res.end() }) app.listen(process.env.PORT || 8083); 復制代碼

同域下的前端代碼只需調(diào)用

function getUsers() {var xhr=new XMLHttpRequest();xhr.open('GET', 'http://localhost:8083/web/users');xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}else {alert(xhr.statusText);}} } 復制代碼

這里有一點需要關注的是,前后端代碼處在同一個域下，xhr.open() url路徑寫成下面這樣也是可以的，它會默認請求到http://localhost:8083/web/users

xhr.open('GET', '/web/users'); 復制代碼

下面我們將node1服務器中的web/users接口刪除：

const app = express(); app.listen(process.env.PORT || 8083); 復制代碼

前端此時自然無法訪問后臺的web/users了，將報一個404錯誤。

下面增加一個node2服務器，在localhost:8085上啟動，同時我們將原先在8083上刪除的web/users接口搬遷到8085上：

const app = express(); app.get('/web/users',(req, res)=>{res.json([{name:"張三",age:12},{name:"李四",age:14}]);res.end() }) app.listen(process.env.PORT || 8085); 復制代碼

由于8085實現(xiàn)了這個接口，我們嘗試在原先8083端口下的ajax調(diào)用它試試：

xhr.open('GET', 'http://localhost:8085/web/users'); 復制代碼

如我們所料，瀏覽器阻止了此次行為，并拋出一個跨域錯誤。

難道就無法訪問那個接口了嗎？其實服務器之間和服務器之間是可以相互調(diào)用的，阻止跨域訪問只是在瀏覽器端做的限制而已。

下面我通過兩種方式來實現(xiàn)如何訪問到8085上的web/users接口。

1 . node直接作為代理訪問

原理就是交由8083后端去訪問8085端口接口，訪問完成交給前端
8083node后端實現(xiàn)代碼：

npm install request --save // 需要安裝一個http request模塊 復制代碼const app = express() const request = require('request') // 訪問此接口時通過request模塊去訪問8085 再返回給前端。 app.get('/web/users',(req, res)=>{var url='http://localhost:8085'+req.urlconsole.log(url) // http://localhost:8085/web/usersreq.pipe(request(url)).pipe(res); }) 復制代碼

2. jsonp方式訪問

就是通過script 的src，向服務器請求數(shù)據(jù)，且這不受同源策略限制；然后服務器將相應的數(shù)據(jù)放入指定的函數(shù)回調(diào)名中，返回給前端。說的有點繞，下面通過實例講解： 8083前端請求8085，這里已經(jīng)不再是ajax請求了，而是直接加載8085上資源。

<script>function getUsers(data) {alert(data)}</script><script src="http://localhost:8085/jsonp?callback=getUsers"></script> 復制代碼

上述代碼第一個script標簽定義了一個函數(shù)getUsers 但是并沒有執(zhí)行，只是定義了而已，要想有執(zhí)行能力，需要

getUsers(data) 復制代碼

所以我們要讓第二個標簽script src="http://localhost:8085/jsonp?callback=getUsers" 返回getUsers(data)內(nèi)容即可，這樣第一個標簽內(nèi)定義的函數(shù)就可以執(zhí)行了。返回接口內(nèi)容只需要放到函數(shù)參數(shù)里即可
后臺8085實現(xiàn)：

const app = express(); const querystring=require('querystring') const url=require('url')// 處理前端jsonp請求 app.get('/jsonp',(req,res)=>{var qs = querystring.parse(req.url.split('?')[1]); //{callback:'getUsers'}var users=JSON.stringify([{name:"張三",age:12},{name:"李四",age:14}]) // 注意需要傳成字符串格式var callback=`${qs.callback}(${users})`res.end(callback) }) 復制代碼

前端返回

是不是有點黑魔法的味道！但是缺點也是明顯的，首先通過此方式有一定安全性的，通過callback后加一些亂七八糟的東西可能會有xss攻擊，最主要的是jsonp不支持post方法。

3 .nginx反向代理器

此方式即類似于第一種node代理方式，也是通過服務器和服務器之間通信，只是不需要8083下后臺服務器自己去訪問8085，而是專門交給nginx,為什么？姑且認為nginx更加專業(yè)吧！ nginx配置

server {listen 8007; # nginx啟動端口,需要訪問這個端口才能夠代理server_name localhost:8083; # 需要代理的服務器location / { # 如果你訪問127.0.0.1/8002/的話nginx去請求proxy_pass http://localhost:8083;}location /web { #訪問/web/aa時會映射成http://localhost:8085/web/aa;proxy_pass http://localhost:8085;}} 復制代碼

8083請求路徑

xhr.open('GET', '/web/users'); 復制代碼

3 CORS

CORS全稱是跨域資源共享 是一個W3C標準，它規(guī)定瀏覽器允許發(fā)送ajax到不同域下的服務器來獲取數(shù)據(jù)，從而克服了原來限制,使用CORS需要前后端都支持，現(xiàn)代瀏覽器基本上都支持。具體CORS的知識可以參考阮一峰博客 www.ruanyifeng.com/blog/2016/0…

app.use('*',function (req, res, next) {res.header('Access-Control-Allow-Origin', '*'); //這個表示任意域名都可以訪問，這樣寫不能攜帶cookie了。 //res.header('Access-Control-Allow-Origin', 'http://www.baidu.com'); //這樣寫，只有www.baidu.com 可以訪問。res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');//設置方法if (req.method == 'OPTIONS') {res.send(200); }else {next();} }); 復制代碼

或者使用現(xiàn)成的CORS模塊

npm install cors 復制代碼var express = require('express') var cors = require('cors') var app = express()var corsOptions = {origin: 'http://www.baidu.com',optionsSuccessStatus: 200 }app.get('/products/:id', cors(corsOptions), function (req, res, next) {res.json({msg: '只有百度可以訪問'}) })app.listen(80, function () {console.log('CORS-enabled web server listening on port 80') }) 復制代碼

如有不正確，請指正^_^

總結(jié)

以上是生活随笔為你收集整理的前端跨域问题解决方案汇总的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。