什么會出現(xiàn)跨域

• 跨域問題來源于JavaScript的同源策略，即只有 協(xié)議+主機(jī)名+端口號 (如存在)相同，則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。跨域問題是針對JS和ajax的，html本身沒有跨域問題，比如a標(biāo)簽、script標(biāo)簽、甚至form標(biāo)簽（可以直接跨域發(fā)送數(shù)據(jù)并接收數(shù)據(jù)）等

如何解決跨域問題

• JSONP
• JSONP是JSON with Padding的略稱。它是一個非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實(shí)現(xiàn)跨域訪問（這僅僅是JSONP簡單的實(shí)現(xiàn)形式）。關(guān)于jsonp的使用方式，可以參考http://blog.csdn.net/alen1985/article/details/6365394，優(yōu)缺點(diǎn)可以參考http://blog.csdn.net/z69183787/article/details/19191385
• 添加響應(yīng)頭，允許跨域
• addHeader(‘Access-Control-Allow-Origin:*’);//允許所有來源訪問
• addHeader(‘Access-Control-Allow-Method:POST,GET’);//允許訪問的方式
• 代理的方式
• 服務(wù)器A的test01.html頁面想訪問服務(wù)器B的后臺action，返回“test”字符串，此時就出現(xiàn)跨域請求，瀏覽器控制臺會出現(xiàn)報錯提示，由于跨域是瀏覽器的同源策略造成的，對于服務(wù)器后臺不存在該問題，可以在服務(wù)器A中添加一個代理action，在該action中完成對服務(wù)器B中action數(shù)據(jù)的請求，然后在返回到test01.html頁面。

Demo1(添加允許跨域請求的響應(yīng)頭)

• html頁面

• 
  
• Web后臺

• 按照上面的訪問，由于127.0.0.1:8080和localhost:8081的域和端口不同，所以同樣會出現(xiàn)跨域問題。

現(xiàn)在用添加響應(yīng)頭的方式

Demo2(jsonp的callback方式)

這里演示的是jquery的ajax，后臺采用的是webservice接口形式

注意此時的dataType為jsonp格式，看看后臺的接收

，

我們返回的其實(shí)就是一個函數(shù)的調(diào)用文本，這里注意，callback的名稱，由于前臺沒有指定callback函數(shù)，所以這里自動生成了，如果想自定義回調(diào)函數(shù)名稱如下操作，添加一行請求參數(shù)

這樣后臺的回調(diào)函數(shù)名就變成了mytest

瀏覽器發(fā)出的請求格式和響應(yīng)數(shù)據(jù)如下，其實(shí)就是返回函數(shù)的調(diào)用，而需要返回的數(shù)據(jù)則以函數(shù)參數(shù)值的形式填入

此時控制臺就能夠獲取到“hello world”

己做網(wǎng)站的時候，經(jīng)常遇到跨域問題，下面是平時多次實(shí)踐總結(jié)出的解決方法，大家有什么更好的思路，可以相互交流下~XMLHttpRequest cannot load http://www.imooc.com/data/check_f.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '[http://localhost:8080](http://localhost:8080/)' is therefore not allowed access.解決方法：跨源問題，添加cors。1.filter或者servlet里面添加response.setHeader("Access-Control-Allow-Origin", "");2.response.setHeader("Access-Control-Allow-Origin", "");放到接收客戶端api 的地方3.如果是servlet的話就放到get或者post方法里面，jsp頁面就扔到第一行4.如果是filter部署就扔到dofilter()

---------------------------------springmvc---------------------------------

添加SimpleCORSFilter.java

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;
import org.springframework.stereotype.Component;
@Component
public class SimpleCORSFilter implements Filter {
 public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
 HttpServletResponse response=(HttpServletResponse) res;
 response.setHeader("Access-Control-Allow-Origin", "*");
 response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
 response.setHeader("Access-Control-Max-Age", "3600");
 response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
 //response.setHeader("Access-Control-Allow-Headers", "Content-Type");
 // response.setContentType("text/html;charset=UTF-8");
 // response.setHeader("Access-Control-Allow-Origin", "*");
 // response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
 // response.setHeader("Access-Control-Max-Age", "0");
 // response.setHeader("Access-Control-Allow-Headers", "Authentication, Origin, Accept, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, token");
 // response.setHeader("Access-Control-Allow-Credentials", "true");
 // response.setHeader("XDomainRequestAllowed","1");
 chain.doFilter(req, res);
 }
 public void init(FilterConfig filterConfig) {}
 public void destroy() {}
}

web.xml添加

<filter>
 <filter-name>SimpleCORSFilter</filter-name>
 <filter-class>com.zhcs.context.SimpleCORSFilter</filter-class>
</filter>
<filter-mapping>
 <filter-name>SimpleCORSFilter</filter-name>
 <url-pattern>/app/*</url-pattern>
</filter-mapping>

--------------------------------------OR-------------------------------------

添加 CorsConfigureAdapter.java

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
@EnableWebMvc
public class CorsConfigureAdapter extends WebMvcConfigurerAdapter {
 @Override
 public void addCorsMappings(CorsRegistry registry) {
 super.addCorsMappings(registry);
 registry.addMapping("/**");
 }
}

在Controller上或方法上使用@CrossOrigin注解

@CrossOrigin(maxAge=3600)

--------------------------------------xml-------------------------------------

<mvc:cors>
 <mvc:mapping path="/**" />
</mvc:cors>
<mvc:cors>
 <mvc:mapping path="/api/**" allowed-origins="http://domain1.com, http://domain2.com" allowed-methods="GET, PUT" allowed-headers="header1, header2, header3" exposed-headers="header1, header2" allow-credentials="false" max-age="123" />
 <mvc:mapping path="/resources/**" allowed-origins="http://domain1.com" />
</mvc:cors>

--------------------------------------Nginx支持跨域請求--------------------------------------

jax跨域請求：CORS。 CORS又稱跨域資源共享，英文全稱Cross-Origin Resource Sharing。

假設(shè)我們想使用Ajax從a.com的頁面上向b.com的頁面上要點(diǎn)數(shù)據(jù)，通 常情況由于同源策略，這種請求是不允許的，瀏覽器也會返回“源不匹配”的錯誤，所以就有了“跨域”這個說法。但是我們也有解決辦法，我們可以再b.com的頁面header信息中增加一行代碼：

header(“Access-Control-Allow-Origin: *”);

當(dāng)我們設(shè)置的header為以上信息時，任意一個請求過來之后服務(wù)端我們都可以進(jìn)行處理和響應(yīng)，那么在調(diào)試工具中可以看到其頭信息設(shè)置， 其中見紅框中有一項(xiàng)信息是“Access-Control-Allow-Origin： ”，表示我們已經(jīng)啟用CORS，如果要限制只允許某個域名的請求，可以這樣：

$.ajax({

type: “POST”,

data: “random=”+Math.random(),

url: “http://xxx.com/ajax.php“,

dataType: “JSON”,

success: function(data) {

console.log(data); $(“#result_3”).html(data.msg);

},

error: function() {

$(“#result_3”).html(‘Request Error.’); }

});