<
/
head
>
<
!
--
<
script src
=
"./js/jquery-1.12.4.min.js"
>
<
/
script
>
--
>
<
script src
=
"http://www.htmleaf.com/js/jquery/2.1.1-rc2/jquery.js"
>
<
/
script
>
<
!
--
<
script src
=
"http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"
>
<
/
script
>
--
>
<
link href
=
"https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
rel
=
"stylesheet"
>
<
input type
=
"text"
name
=
"batch"
placeholder
=
"设备号"
class
=
"form-control"
id
=
"batch"
list
=
"batch_list"
autocomplete
=
"off"
>
<
!
--
选择内容
--
>
<
datalist id
=
"batch_list"
>
<
/
datalist
>
<
!
--
动态加载选择的内容
--
>
<
script
>
$
(
'input#batch'
)
.
bind
(
'keyup'
,
function
(
)
{
var
batch
=
$
(
'input#batch'
)
.
val
(
)
;
$
.
ajax
(
{
url
:
"http://xxxxxx"
,
type
:
"GET"
,
dataType
:
'json'
,
crossDomain
:
true
,
data
:
{
'MdTitle'
:
batch
}
,
async
:
false
,
success
:
function
(
arg
)
{
$
(
'datalist#batch_list'
)
.
empty
(
)
;
for
(
var
i
=
0
;
i
<
arg
.
length
;
i
++
)
{
var
add_options
=
'<option value="'
+
arg
[
i
]
+
'">'
+
arg
[
i
]
+
'</option>'
;
$
(
'datalist#batch_list'
)
.
append
(
add_options
)
;
}
)
;
<
/
script
>
<
/
body
>
<
/
html
>
1. 什么是跨域？
要了解什么是跨域，首先需要知道什么是同源
策略
。同源
策略
是由Netscape公司提出的一个注明的安全
策略
，所有支持JavaScript的浏览器都会使用这个
策略
。所谓同源是指，域名，协议，端口相同。当页面执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器就会在控制台中抱一个异常，提示拒绝访问。
同源
策略
一般又分为两种：
DOM同源
策略
：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的；
XmlHttpReq
已被
CORS
策略
阻止
：请求的资源上没有'Access-Control-Allow-Origin'标头 (使用Access-Control-Allow-Origin解决跨域)
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.
cors
.
Cors
Config...
二、解决方法
1.安装django-
cors
-headers
pip install -i https://pypi.douban.com/simple django-
cors
-headers
2.将
cors
headers添加到全局配置文件的INSTALLED_APPS中，尽量放在前面
INSTALLED_APPS = [
'
cors
headers',
'django.contrib.admin',
Access to XMLHttpRequest at 'https://*****.com/' from origin 'http://localhost:80' has been blocked by
CORS
policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决这个东西的前提是浏览器可以直接访问url，但是js的get请求会报错。今天发现了一种sao操作：
