在工作中，大家應(yīng)該都遇到過ajax跨域問題，瀏覽器的錯(cuò)誤如下：

XMLHttpRequest cannot load http://目標(biāo)地址No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://當(dāng)前頁面地址' is therefore not allowed access.

為什么會(huì)出現(xiàn)跨域問題

跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)JavaScript施加的安全限制。

在此說明一下，所謂的同源，指的是域名、協(xié)議、端口均相等。舉例如下：

http://www.abc.com/a/b 調(diào)用 http://www.abc.com/d/c（非跨域）

http://www.abc.com/a/b 調(diào)用 http://www.def.com/d/c （跨域：域名不一致）

http://www.abc.com:81/a/b 調(diào)用 http://www.abc.com:82/d/c （跨域：端口不一致）

http://www.abc.com/a/b 調(diào)用 https://www.abc.com/d/c （跨域：協(xié)議不同）

請(qǐng)注意：localhost和127.0.0.1雖然都指向本機(jī)，但也屬于跨域。

在一個(gè)http請(qǐng)求中，http頭部Referer或Origin字段標(biāo)識(shí)了當(dāng)前域名，Host字段標(biāo)識(shí)了此時(shí)請(qǐng)求的域名。

故，如果我們?cè)诋?dāng)前的js頁面，通過ajax請(qǐng)求第三方的數(shù)據(jù)，就會(huì)出現(xiàn)瀏覽器的跨域問題。

解決跨域問題

解決跨域問題，有如下三種方式：

1、使用jsonp

2、服務(wù)器代理

3、在服務(wù)端設(shè)置response header中Access-Control-Allow-Origin字段。

使用jsonp

jsonp解決跨域問題的原理是，瀏覽器的script標(biāo)簽是不受同源策略限制的，我們可以在script標(biāo)簽中訪問任何域名下的資源文件。利用這一特性，用script標(biāo)簽從服務(wù)器中請(qǐng)求數(shù)據(jù)，同時(shí)服務(wù)器返回一個(gè)帶有方法和數(shù)據(jù)的js代碼，請(qǐng)求完成，調(diào)用本地的js方法，來完成數(shù)據(jù)的處理。

前端實(shí)現(xiàn)，以Jquery的ajax方法為例：

$.ajax({
url:"",
dataType:'jsonp',
data:'',
jsonp:'callback', //傳遞給請(qǐng)求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(默認(rèn)為:callback)

    success:function(result) {  
        //成功的處理
    },
    error:function(){
        //錯(cuò)誤處理

}
});
服務(wù)端此時(shí)返回的不能是普通的json字符串，而是一段可以被前端js執(zhí)行的一段js代碼。

比較一下json與jsonp格式的區(qū)別：

json格式：

{
"message":"獲取成功",
"state":"1",
"result":{"name":"工作組1","id":1,"description":"11"}
}
jsonp格式：

callback({
"message":"獲取成功",
"state":"1",
"result":{"name":"工作組1","id":1,"description":"11"}
})
從格式來看，jsonp是在json的基礎(chǔ)上包裝了一個(gè)方法名，此方法名是前端請(qǐng)求傳過來的，如請(qǐng)求地址為：http://localhost:9999/tookApp/tbk/getItem?callback=JSONP_CALLBACK，那么方法名就是JSONP_CALLBACK。

下面提供一段java代碼，對(duì)象轉(zhuǎn)jsonp的工具類：

package com.tooklili.app.web.util;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang.StringUtils;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import com.fasterxml.jackson.databind.util.JSONPObject;

/**

• @author ding.shuai

• @date 2016年8月15日上午9:47:02
  */
  public class AppUtil {

  /**

  • 判斷json字符串是否需要轉(zhuǎn)化成jsonp格式
  • @param request
  • @param result
  • @return
    */
    public static Object conversionJsonp(Object result){
    HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();
    return conversionJsonp(request, result);
    }

public static Object conversionJsonp(HttpServletRequest request,Object result){
    String callback = request.getParameter("callback");
    if(StringUtils.isNotEmpty(callback)){
        return new JSONPObject(callback, result);
    }
    return result;
}

}
jsonp的缺點(diǎn)：

1、JSONP是一種非官方的方法，而且這種方法只支持GET方法，不如POST方法安全。（從實(shí)現(xiàn)機(jī)制就可明白）。

2、JSONP的實(shí)現(xiàn)需要服務(wù)器配合，如果是訪問的是第三方的服務(wù)器，我們沒有修改服務(wù)器的權(quán)限，那么這種方式是不可行的。

服務(wù)器代理

這種方式運(yùn)用的就是服務(wù)器的反向代理技術(shù)，控制客戶端和服務(wù)器的訪問都從代理服務(wù)器經(jīng)過，比如用nginx作為服務(wù)器代理，在nginx上配置客戶端和第三方服務(wù)的反向代理，這樣就可保證客戶端、第三方是同源的了，同一個(gè)源，都來自代理服務(wù)器。

關(guān)于nginx的反向代理配置，可訪問我的這篇博客：http://blog.csdn.net/csdn_ds/article/details/58605591

服務(wù)器代理的缺點(diǎn)：

開發(fā)比較麻煩，對(duì)開發(fā)環(huán)境比較嚴(yán)格，需要在本機(jī)上配置代理服務(wù)器。

優(yōu)點(diǎn):

完美解決使用jsonp，第三方服務(wù)沒有修改權(quán)限的問題。程序的代碼侵入性小，代碼級(jí)別不需要考慮跨域問題。

在服務(wù)端設(shè)置response header中Access-Control-Allow-Origin字段

在被請(qǐng)求的Response Header中加入如下代碼：

// 指定允許其他域名訪問
response.setHeader("Access-Control-Allow-Origin", "*");
// 響應(yīng)類型
response.setHeader("Access-Control-Allow-Methods", "POST");
// 響應(yīng)頭設(shè)置
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
如果所有請(qǐng)求都想讓其他域名的服務(wù)通過瀏覽器ajax請(qǐng)求到，可以通過Filter統(tǒng)一設(shè)置response header。

package com.tooklili.app.web.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

/**

• 設(shè)置公共屬性的過濾器

• @author shuai.ding

• @date 2017年6月21日上午11:02:27
  */
  public class CommonSetFilter implements Filter{

  @Override
  public void init(FilterConfig filterConfig) throws ServletException {
  }

  @Override
  public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
  throws IOException, ServletException {
  //解決跨域問題
  HttpServletResponse httpServletResponse =(HttpServletResponse)response;
  // 指定允許其他域名訪問
  httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
  // 響應(yīng)類型
  httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST");
  // 響應(yīng)頭設(shè)置
  httpServletResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

    chain.doFilter(request, response);
  

  }

  @Override
  public void destroy() {
  }

}
此處說明一下，筆者親測(cè)：只設(shè)置Access-Control-Allow-Origin屬性也是可以的。

Access-Control-Allow-Origin:* 表示允許任何域名跨域訪問

如果需要指定某域名才允許跨域訪問，只需把Access-Control-Allow-Origin:*改為Access-Control-Allow-Origin:允許的域名

例如：response.setHeader(“Access-Control-Allow-Origin”,”http://www.client.com”);

缺點(diǎn)：

1、此種解決跨域方案，需要瀏覽器支持H5，因?yàn)檫@是HTML5解決跨域的方式，如果產(chǎn)品面向的是PC端，這種方式可能就不是一個(gè)好的解決方案，如果面向的是手機(jī)端，此方法不為一個(gè)簡單、粗暴的好方式。

2、設(shè)置*，存在安全隱患。

總結(jié)

綜上三種解決跨域的方案，個(gè)人感覺使用服務(wù)代理最好，沒有破壞瀏覽器的安全策略，但這個(gè)對(duì)開發(fā)環(huán)境要高一點(diǎn)。設(shè)置response header的方式，根據(jù)具體情況分析，要考慮清楚產(chǎn)品面向的用戶。對(duì)于jsonp這種方式，雖然沒有破壞瀏覽器的安全策略，但只支持get方式的請(qǐng)求，有點(diǎn)不能接受，因?yàn)間et傳輸有參數(shù)長度的限制，同時(shí)又要考慮傳輸中文的亂碼問題，但如果項(xiàng)目中只是簡單的查詢、展示，這種方式還是可以考慮的。